Интеграция и кооперация

Несомненно, интегрированная среда разработчика (IDE — Intregrated Development Environment) штука хорошая, можно сказать, замечательная. Как правило, под такой средой понимается единая программа, объединяющая в себе и редактор для написания кода, и компилятор, и систему сборки, и отладчик — потому она и называется интегрированной. Вообще–то, особых проблем с её освоением и использованием быть не должно: можно даже подстроить отдельные компоненты под свои личные префернции с помощью плагинов. Но как быть, если уже привык к некоторому набору инструментов, не только идеально подстроив–настроив, а и отшлифовав–отполировав каждый из них? Перспектива перехода на любую «классическую» IDE воспринимается как замена мягких и уютных бурок на стариковских ногах стильными кожаными туфлями на модном, но некомфортном каблуке.

Вот и возникает противоречие: с одной стороны, чтобы всё срабатывало само собой («механизация и автоматизация в действии»), а с другой стороны, сердце кровью обливается от грядущего расставания с отдельными приложениями, столь милыми сердцу, глазам и прочим органам.

Тем не менее, мне удалось решить проблему путём частичной интеграции, более похожей на кооперацию нескольких несвязанных между собой в обычной жизни инструментов.

Свою «кооперативно–интегрированную» среду для работы с сайтом я начал строить на Notepad++ и «джентльменском наборе» Денвер (веб–сервер Apache, СУБД MySQL, интерпретатор PHP и много других утилит, локально имитирующих стандартную службу хостинга). Строго говоря, текстовый редактор и пакет веб–процессинга никак между собой не связаны, то есть, не интегрированы, но в ближайшее время и с неизбежностью мировой революции будут скооперированы: все усилия по интегрированию или псевдоинтегрированию направлены на решение светлой задачи — добиться незамедлительного и автоматического отображения в браузере любых изменений в компонентах веб–страницы (html, css, php, javascript, изображения jpeg, png, gif), большая часть которых производится именно в текстовом редакторе.

Крайние элементы «пазла» обозначены, теперь нужно выстроить цепочку из правильно подобранных промежуточных компонентов.

Если начинать движение от Блокнота, то к нему уже «прикручен» интерпретатор–преобразователь SASS: и сама система установлена (вернее, клон этой системы, без Ruby, — Scout), и плагин, обеспечивающий интерфейс редактора с интерпретатором.

Следующий элемент цепочки — gulp, система сборки проекта, который «подхватывает» изменённые файлы (в том числе и созданный Скаутом), обрабатывает их в соответствии с моим набором инструкций и посылает сигнал Огнелису о необходимости перегрузить страницу. Браузер распознаёт этот сигнал благодаря предусмотрительно установленному расширению и запрашивает обновлённую версию страницы у веб–сервера. Апач, входящий в состав Денвера (вот мы до него и добрались) выполняет запрос, и перед глазами изумлённого разработчика — ай, шайтан! — возникает то, чего он добивался (или же нечто совершенно неожиданное — в случае ошибки).

Ключевым элементом в этой цепочке на текущий момент оказался Гульп: всё остальное уже настроено и работает на благо любимого сайта. Поскольку автор статьи не располагает кривой козой (нормальной козы, кстати, тоже нет), то возможности объехать проблему на этом сомнительном транспортном средстве не предвидится, по крайней мере, в обозримом будущем. Таким образом, задачу приходится решать.

В качестве отправной точки я выбрал гугловский «стартовый пакет разработчика», который тоже использует Gulp. Итак, начинаю читать документацию и разбираться в его устройстве и функциональности по старому детскому принципу: откручивать кукле голову, чтобы увидеть внутренности.

Собственно говоря, начальный пакет разработчика содержит набор шаблонов и инструментов, который способен полностью заменить HTML5Boilerplate и Bootstrap, хотя команда Google тактично и дипломатично оставляет решение об отказе от этих двух пакетов (и переходе на их продукт) на усмотрение разработчика, то есть, вполне допускает некий симбиоз. Для меня же объектом первостепенного интереса в гугловском наборе является предлагаемый файл–сценарий gulpfile.js: именно в него я и полез с зубилом, молотком, сверлом и плоскогубцами.

Рубиновый механизм

Мало что изменилось за последние несколько столетий в отношении островного государства 日本国 (иероглифы означают «Солнце, начало, страна», то есть, «Страна восходящего Солнца»): как было окутано загадками, тайнами и мистикой «Опоньское царство», так и остаётся по сей день почти эквивалентом Беловодья, Шамбалы, Агартхи и не исключено, что бел–горюч камень Алатырь всё ещё находится там — «на море–окияне, на острое Буяне».

Вспоминается фрагмент телепередачи про трёх японских чудо–мастеров: один умеет филигранно затачивать резец здоровенного рубанка, второй с помощью этого рубанка может снять с деревянного бруса невероятно тонкую стружку, которую не отличить от листа бумаги, а третий — широкими размашистыми мазками пишет на этой деревяшке–бумажке наполненные глубоким содержанием иероглифы. Не удивительно, что получившийся продукт вызывает у японцев, ценителей прекрасного, умопомрачительные восторги, но удивительно, что «точильщик», «стругальщик» и «писарь» пользуются всенародными славой и почтением. Нам это сложно понять: воистину, «Восток — дело тонкое», ведь у нас Левши обычно умирают в безвестности и нищете.

А ещё вспомнились «путевые заметки» нашего соотечественника, длительное время прожившего и проработавшего в Японии: он рассказывал о том, что электронная промышленность страны выпускает много уникальных гаджетов, о которых в других странах даже не имеют ни малейшего представления, поскольку эти устройства производятся только для внутреннего потребления.

В общем, Япония так и продолжает оставаться «вещью в себе».

К чему этот географически–исторический экскурс? Дело в том, что в конце предыдущего века, в 1995 году, японский разработчик программного обеспечения опубликовал созданный им язык программирования Ruby, призванный, по замыслу автора, устранить недостатки Perl'а при помощи использования сильных сторон нескольких языков программирования. Свой, более «крепкий» язык Ю.Мацумото назвал «Рубином» (именно так переводится с английского слово ruby), очевидно в противовес «Жемчугу» (английское слово perl читается точно так же, как и pearl — жемчуг). То есть, с намёком на несравненно бо́льшую ценность.

Не исключено, что новый «рубиновый» язык изначально тоже предназначался для «внутреннего потребления» — его описание на английском языке появилось только спустя два года. Но с 1997 года начинается распространение Ruby по планете: был отмечен некоторый начальный всплеск интереса, но невероятной популярности, соответствующей «драгоценному» названию, он не приобрёл, хотя и занял свою нишу рядом с PHP, Python, Java и уже упоминавшимся Perl.

Пока в мои планы не входит переводить свой сайт «Заливная рыба» на Ruby — меня вполне устраивает старый добрый PHP, как бы ни исходили ненавистью к этому языку злопыхатели, — но эта статья возникла по другой необходимости: очень уж мне приглянулась система SASS/SCSS, а реализована она именно на Ruby.

Беглое ознакомление со «стилистически классными таблицами стилей» — так переводится с английского название системы, образующей аббревиатуру SASS — повергло меня в печаль великую: как же я раньше жил без этого «рубинового» механизма? Как можно по–старому верстать сайт, если в CSS–файла можно, оказывается, использовать переменные, вложенность, наследования, функции, подмешивания!

Я ни в коем случае не собираюсь разворачивать на страницах своего блога курсы работы с Ruby или SASS/SCSS: я сам только начинаю осваивать новые возможности по созданию таблиц стилей, а до изучения «Рубина» дело вообще может не дойти. В любом случае, в Сети есть прорва ресурсов, способных рассказать, показать, научить и первому, и второму. А также, третьему и четвёртому: эти самые «третий» и «четвёртый» — фреймворк Compass и система Scout — очень кстати обнаружились в процессе пятидневного разбирательства в ситуации (начитался я до одури всяких публикаций и про «рубин» и «рубинозависимые» приложения, а потом ещё дня три отходил от обилия информации и переваривал её).

Оказалось, что надстройка Compass содержит коллекция полезных утилит и функций для упрощения формирования стилей, включая работу со спрайтами, формирование вертикального ритма, автоматическая вставка префиксов.

Ещё более полезным оказался пакет Scout (мне досталась версия 0.7.1 для Windows) «3–in–1», как дерзко и цинично претендующая на звание кофе бурда MacCoffee. Вернее, я получил даже «четыре в одном»: и Ruby, и SASS/SCSS, и Compass и графическая оболочка (честно говоря, GUI можно назвать таковым весьма условно). Более того, всё моё новое достояние даже отдалённо не напоминает MacCoffee.

Установка пакета не занимает много времени и, в принципе, не может составлять какой–либо трудности: запускаешь ScoutAppInstaller-0.7.1.exe и отвечаешь на вопросы оконных диалогов (в какую папку ставить, куда выкладывать иконки и т.п.). В конечном итоге, пользователь получает возможность лицезреть серенькое окошко с заголовком «Scout» в левом верхнем углу и кнопкой со значком «+» в левом нижнем углу (см. скриншот внизу слева). Поскольку никаких иных элементов не наблюдается, шаловливые ручонки, практически без вмешательства головного и спинного мозгов нажимают кнопочку с плюсиком, что приводит к появлению диалога для выбора каталога, в котором размещён проект (см. скриншот справа внизу).

Искушённый читатель, наверное, уже догадался, что мой проект, базирующийся на домене «zaliv.info», располагается в папке с неожиданным именем Zaliv. После этого «Скауту» явно полегчало: он начал деловито собирать сведения о месте, где будут скрываться исходные SCSS–файлы (Input Folder) и куда потом нужно будет складывать результаты обработки «сырья», прошедшего горнило Compass и SASS (Output Folder — оба поля находятся в разделе Stylesheet Directories, см. скриншот внизу). Можно было указать и «Другие каталоги» (Other Directories), то есть, адреса папок, в которых расположены скрипты (Javascripts Folder), изображения (Imagess Folder), — говорят, что Scout с Compass'ом умеют «паковать» не только CSS, — но у меня насчёт всего остального (скрипты, изображения, страницы) были другие планы. Что касается файла конфигурации (Config File), то речь идёт, скорее всего, о тонких настройках работы системы: можно поиграться с различными параметрами, уходящими своими корнями в «рубиновый механизм», но я отложил эти эксперименты «на потом» (а может и «на никогда»).

Есть ещё два блока настроек: один связан с режимом вывода (Output Mode), а второй — с управлнием проектом (Manage Project). Сразу необходимо отметить, что управление проектом в Скауте оформлено очень незатейливо и сводится к его (проекта) удалению: рядом с лейбой «Удалить проект» (Remove Project) располагается кнопка удаления Remove. А вот режимы вывода предлагают выбор: то ли разработчик находится в процессе разработки (Environment:Devolopment в выпадающем списке), то ли формирует окончательный продукт для публикации (Environment:Production), то ли выходные файлы нужны во вложенном виде (Output Style::Nested), то ли развёрнутом (Output Style::Expanded), то ли компактном (Output Style::Compact), то ли сжатом (Output Style::Compressed). Вообще–то, разбираться в некоторых аспектах Скаута довольно непросто: пакет, практически недокументирован и пребывает в непонятном состоянии — ни альфа, ни бета, не говоря уже о пре-релизе. Да, и документация Компаса, хоть и подробна, но коряво организована, то есть, оставляет желать лучшего.

По некоторым косвенным данным можно предположить, что режим конечного продукта (Environment:Production) проводит какие–то более глубокие, трудоёмкие и длительные операции с исходными файлами. Режимы упаковки и сжатия (Output Style::Compact и Output Style::Compressed) удаляют из конечных файлов ненужности и красивости (например, комментарии, форматирующие пробелы и табуляции), что обеспечивает уменьшение размера CSS–файла и, соответственно, время на его загрузку.

«Шаловливые ручонки, нет покоя мне от вас!» Ну, как же утерпеть от проверки работоспособности установленной софтины?! Конечно же, наваял я простенький SCSS–файлик в своём прекрасном Блокноте и сохранил его в папку исходников (Input Folder) как test.scss:

@import "compass/css3"; 
@import "compass/support";

$color : green; 

.panella {
 background-color: $color;
 @include border-radius(25px);
}

Затем я запустил режим обработки SCSS–файла (при помощи кнопки Play в слоте моего проекта на левой панели). Как нетрудно заметить, графическая оболочка в этом месте «сдулась» и на глазах у изумлённой публики появилось традиционное окно для отображения командной строки (вот что я имел ввиду когда писа́л об «условном GUI»). При этом кнопка Play превратилась в кнопку Stop, то есть, Scout заступил на дежурство по наблюдению за изменениями в папке исходящих файлов, а на консоль выведено сообщение о замеченном изменении файла test.scss и его компиляции в файл test.css (на скриншоте внизу — верхние две строчки белым шрифтом на чёрном фоне). Любые попытки внести изменения в файл test.scss (например, удаление пробела) после его пересохранения немедленно обрабатывались системой с перезаписью файла test.css.

А вот так выглядит содержимое файла test.css:

/* line 6, scss/test.scss */
.panella {
  background-color: green;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
}

Как говорится, насладитесь результатом.

По ходу дела вскочила ещё одна заковыка: любовно настроенный под мои предпочтения Notepad++ взял за моду грубо «ругаться» при каждом сохранении SCSS–файла. Дело в том, что предвкушая дружную и слаженную работу с SASS/SCSS я добавил в плагин jN скрипт Sass-Auto-Compile.js, призванный дело то же самое, что и Scout (тогда ещё Скаут даже не маячил на горизонте). Оказалось, что скрипту для правильной работы необходимо знать путь к интерпретатору Ruby, а в установленном пакете Scout интерпретатор не обнаружен. Перемещение проблемного скрипта в папку disabled проблему ликвидировало (Блокно перестал выбрасывать возмущённые сообщения), но «неприятный осадок остался»: что же я такое установил?

Внимательное исследование лога установки пакета Scout показало, что дополнительно была установлена только среда выполнения Adoba AIR, а вместо Ruby был установлен его Java–клон jruby-complete.jar, и при запуске Scout система вызывает интерпретатор Java.

Блокнот·два·плюса — форэва!

Ведь клялся же себе, что буду придерживаться умеренности, но опять сорвался: стремление к обновлению не имеет границ и с этим стремлением, можно даже сказать, страстью нужно поступать как с ремонтом в квартире — «закончить нельзя — можно только прекратить». Хорошо, что в этот раз удалось отделаться «малой кровью».

Как–то незаметно мои усилия по реорганизации инфраструктуры для разработки сайта (вернее, его переделки) во второй раз посягнули на святая святых разработчика — его редактор кодов. Напомню невнимательному читателю моего дневника, что однажды я уже перешёл с Homesite на Notepad++, а тут ещё раз шайтан взялся меня попутать — подсунул чудо современной программерско–компьютерной мысли, редактор Sublime Text. Грешен: повёлся! Ну, кто, скажите на милость, в здравом уме и при твёрдой памяти откажется от чуда чудного и дива дивного?

Должен признаться, что выстраданная многими годами юзания компьютера осторожность по отношению к новому софту заставила меня в течение полутора дней тщательно изучать мнения сторонником и противников — это раньше я мог, задрав хвост и, соответственно, штаны, лихо установить себе новую программулину, а потом несколько дней восстанавливать систему, вычищая следы и разгребая последствия своего импульсивного поступка.

В конечном итоге, результаты заочного знакомства с новым редактором выглядели весьма оптимистично и привлекательно: и работает он шустрее, и интерфейс приятнее, и всяких приблуд для него видимо–невидимо… Весьма убедительны были традиционные пользователи Notepad++, которые стройными рядами, практически в едином порыве, с пламенным взором и песня́ми переходили под новые знамёна. Несколько настораживали встречавшиеся в Сети рекомендации о том, как изменить этот прекрасный редактор, чтобы он был похож на Notepad++.

И сегодня я, наконец–то, созрел: решил установить и попробовать — уж слишком много было хвалебных отзывов и практически отсутствовали весомые аргументы против (самым весомым являлась бесплатность Блокнота против «условнобесплатности» Сублима). Итак, установил, попробовал и …снёс, то есть, удалил. Фуфло!

Вообще–то, на этом можно было бы статью и закончить, но я решил, всё–таки, аргументировать свою позицию. Для начала повторю уже упоминавшийся аргумент: NPP (Notepad++) бесплатен, а ST (Sublime Text) пока условно бесплатен (лицензия стоит $70) — ключевой слово в этой фразе «пока», потому что никто не знает, когда разработчик включит обязательность приобретения лицензии, то есть, у пользователя возникнет необходимость поиска «таблэтки».

Кроссплатформенность ST, которую его апологеты выдвигают в качестве основного и весьма существенного преимущества, для меня неактуальна, а вот богатый инструментарий NPP для работы с различными кодировками кириллицы — весьма и весьма ценная фича. В ST я вообще не нашёл управления кодировками: наверное, потому, что редактор заточен под англоязычного пользователя, которому совершенно незачем заморачиваться со всякими там KOI–CP1251 и их многочисленными братьями–сёстрами. Я уж не говорю о том, что интерфейс редактора исключительно английский, и хотя у меня не возникает в этой связи языковой проблемы, русскоязычный NPP сердцу милее.

И хотя, как утверждают пользователи ST, уже наработана чёртова прорва плагинов под новый редактор, расширений для NPP всё равно больше. Я вполне допускаю, что моё поверхностное личное знакомство с SP оказалось уж слишком поверхностным, но у меня внезапно пропало желание углубляться, а я привык доверять своей интуиции, тем более, что был изначально настроен почти позитивно к SP.

Правильно настроенный NPP может творить чудеса: макросы, расширения (один только Emmet, a.k.a ZenCoding чего стоит), с подсветкой синтаксиса, перекодировкой. Я, кстати, добавил «раскраску» синтаксиса для SCSS, HTML5 и CSS3, а также скрипт для компиляции SCSS в CSS прямо из NPP (без плагина jN скрипт не работает). Я уж не говорю о разнообразных «стандартных» плагинах (тех, которые устанавливаются через Plugin Manager), щедрой рукой добавляющих Блокноту·два·плюса разнообразные полезности и «вкусности»

В общем, снова здравствуй, Блокнот! Я вернулся.