Большое средство малой механизации

Да здравствует лень — величайший двигатель прогресса! Именно благодаря лени древний человек изобрёл колесо и приручил лошадь, не менее ленивые представители населения планеты изобрели и компьютеры. Это, так сказать, эпохальные проявления нежелания самостоятельно выполнять монотонную или тяжёлую работу. Есть и более скромные, но не менее полезные результаты «ленивых» изощрений: застёжка–«молния», пылесос, «крутилка» суши–роллов (как на картинке в начале статьи), гель для бритья, джин, поиск и замена в текстовых редакторах… Вот, только, растворимый кофе напрасно изобретали…

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

Меня тоже частенько накрывает плотной мягкой и тёплой волной ленивости: при малейшем удобном случае стремлюсь автоматизировать рутинные повторяющиеся операции и сформировать максимально комфортную среду для работы. В этой статье речь пойдёт о «малой механизации» в работе с таблицами стилей (CSS) и сценариями–скриптами (JS и jQuery). И выбор пал на систему сборки, оптимизации, проверки и упаковки всего перечисленного добра (и не только!) под игривым названием «Хрюк» (по–английски Grunt) — согласитесь, мечта лентяя (и в смысле функциональности, и, некоторой степени, в смысле названия).

Название подтверждается логотипом системы — изображением злобного клыкастого кабана: даже секачу, похоже, не нравится, что разработчик свинячит, а животине разгребать.

Почти сразу образовалась альтернатива «злобному хрюку»: аналогичный пакет и даже с немного похожим английским названием — Gulp. Не то, чтобы я испугался свирепой кабаньей хари, но гораздо ближе по духу оказался «глоток» (по–английски gulp): и с кофе удачно ассоциируется (см. логотип справа), и поновее «хрюка», и те же функции реализованы на более прогрессивной концепции.

Также, как и в случае использования «хрюка», установка «глотка» начинается с установки Node.js — платформы, использующей V8 (движок Google Chrome, исполняющий сценарии Javascript) для запуска скриптов вне браузера. Ничего особенного в процессе установки пакета в Windows нет — запускаешь node-v0.10.33-x86.msi и отвечаешь на типовые вопросы, возникающие при инсталляции любой программы.

Следующий шаг — установка собственно Gulp, и для этого (а также последующей установки gulp–плагинов) используется встроенный в Node.js менеджер пакетов — npm (Node Package Manager). Сначала «гульп» устанавливается глобально. Для этого нужно перейти в каталог проекта, то есть, в папку, в которой будут размещены все ресурсы, из которых Gulp будет «собирать» компоненты для сайта и создать там файл package.json при помощи команды init, ответив на пошаговые вопросы. Если вдруг возникнет чувство неудовлетворённости простотой решения, файл package.json можно сварганить «руками» с использованием текстового редактора.

npm init
npm install --global gulp

Затем этот же пакет нужно установить локально — не спрашивайте, зачем нужна эта двойная инсталляция:

npm install --save-dev gulp

После этого в папке проекта устанавливаются все необходимые для полного счастья gulp–плагины:

npm install --save-dev <имя_плагина>

Я собрал для себя такую «коллекцию»:

• beepbeep — включение системного звука (аргументы задают количество и продолжительность сигналов);
• del — удаление файлов;
• glob — выбор файлов по шаблону (например, *.js);
• gulp-autoprefixer — добавление префиксов для адаптации CSS–файлов для использования с браузерами, поддерживающими собственный синтаксис (аналогично тому, как это делает Compass);
• gulp-browserify — сборка исходных файлов со скриптами в один js–файл с контролем корректности синтаксиса языка программирования;
• gulp-concat — «склеивание» исходных файлов в единый файл;
• gulp-filesize — определение размера файла;
• gulp-imagemin — минимизация файла изображения JPG, PNG. GIF и SVG;
• gulp-livereload — обновление страницы в браузере;
• gulp-minify-html — мнимизация HTML–файлов;
• gulp-notify — вывод сообщения;
• gulp-plumber — предотвращение прерывания потока (pipe) при возникновении ошибки;
• gulp-rename — переименование файлов;
• gulp-sass — преобразование SASS/SCSS–файлов в CSS («конкурент» фреймворка Compass, уже развёрнутого на моём компьютере);
• gulp-sourcemaps — формирование «карт» объединённых файлов для возможности последующей отладки;
• gulp-uglify — минимизация js–файлов;
• gulp-uncss — удаление из CSS–файла стилей, не используемых в проекте;
• gulp-util — вспомогательные функции (вывод сообщения, обработка ошибок, замена расширения файлов и т.п.);

Должен заметить, что некоторые плагины у меня не инсталлировались из виртуальной машины (я использую VMWare Player 6.0.1 build-1379776): попытки установить gulp-uncss, gulp-sass и некоторых других пакетов появлялись «ругательные» сообщения такого вида:

Проблему оказалось довольно просто обойти путём инсталляции тех же пакетов из основной системы (дерево моих проектов доступно и из основной, и из виртуальной систем).

Что касается формирования файла заданий gulpfile.js, который управляет работой Гульпа, то я нахожусь в самом начале пути, поэтому не буду изображать из себя гуру, копируя многочисленные рекомендации и примеры, которые сам нашёл в Сети. Но готов делится с громадой всеми удачными и ошибочными достижениями в этой области — следите за рекламой!

А начать решил с настройки автообновления страницы сайта: при изменение какого–либо из «контролируемых» файлов, состояние страницы в браузере должно немедленно и без дополнительной команды, то есть, самостоятельно обновляться. Для этой цели существует плагин gulp-livereload, но он, похоже, должен работать в тандеме с мини–сервером, предоставляемым другим плагином. Я пытался разобраться в этой спарке, но с налёта у меня не получилось, а долго ломать голову желания не возникло. Поэтому очень кстати оказалось одноимённое расширение к моему браузеру (Mozilla Firefox 34.0). Там же, такое же «удовольствие» имеется и для Google Chrome, и для Safari. Есть такое же расширение и для IE, но придётся разбираться с его установкой, потому что, например, на официальном «мозиловском» сайте предлагается расширение старой версии (и неизвестно, какая версия потребуется для IE).

// Файл gulpfile.js
var gulp = require('gulp'),
    refresh = require('gulp-livereload');

gulp.task('monitor', function(){
  refresh.listen();
  gulp.watch('css/*.css', ['css'])
      .on('change', refresh.changed);
})

Этим скриптом запускается встроенный в gulp-livereload сервер, а встроенная в gulp утилита наблюдения за изменениями файлов (gulp.watch) начинает следить за этими самыми изменениями.

С практической точки зрения, сначала запускается из командной строки задача слежения:

> gulp monitor

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

P.S. Менее, чем через месяц предложенный список gulp–плагинов претерпел существенные изменения.