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

Несомненно, интегрированная среда разработчика (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: именно в него я и полез с зубилом, молотком, сверлом и плоскогубцами.