В предыдущей статье “Gulp - знакомство и первый запуск”” мы познакомились с установкой менеджера Gulp и запуском первой задачи под него. В этой статье мы перейдем к еще более интересному материалу, в котором узнаем, как устанавливать и запускать плагины под Gulp на примере одного из них - gulp-uglify.
Как я уже упоминал ранее, Gulp имеет модульную структуру. Под Gulp, несмотря на молодость проекта, уже написано достаточное количество плагинов. Конечно, оно не сравниться с огромной коллекцией таковых под мега-популярный Grunt, но для большинства случаев жизни уже сейчас их хватит.
Каждый из плагинов - это код, решающий только одну задачу. Например, один плагин умеет сжимать изображения, другой сжимает js-файлы, третий сжимает css-файлы; еще один умеет компилировать scss-файлы в css-файлы. И так далее - список можно продолжать и продолжать.
Становиться понятно, что для конкретной задачи нам нужно установить нужный плагин и создать задачу (task) в файле gulpfile.js. А затем запустить Gulp на выполнение этой задачи. Конечно, задач может быть не одна, а несколько. Все зависит о того, какие именно задачи нам необходимо выполнять.
Давайте рассмотрим процесс установки плагинов и настройки задач на примере одного из них - gulp-uglify. Данный плагин служит для минификации js-файлов - он удаляет пробелы, запятые, точки с запятой. В результате js-файл получается меньшим по размеру.
Все плагины под Gulp размещены по этому адресу - Gulp Plugins. В строке поиска нужно вводить имя искомого плагина, в результате получаем (или не получаем) страницу с описанием плагина и командой для его установки.
Устанавливаем gulp-uglify под Gulp
На странице плагина gulp-uglify описана команда установки этого плагина, которую мы повторим для себя, в своем проекте:
$ npm install --save-dev gulp-uglifyОпять таки, ключ –save-dev “говорит” менеджеру npm добавить плагин gulp-uglify в качестве зависимости в файл package.json:
$ cat package.json
{
"name": "first",
"version": "0.0.1",
"devDependencies": {
"gulp": "~3.8.7",
"gulp-uglify": "~0.3.1"
}
}Создаем задачу gulp-uglify под Gulp
Плагин gulp-uglify установлен и теперь самое время прописать в файле gulpfile.js именованную задачу (named task) под него. Надеюсь, уважаемый читатель помнит о двух типах задач под Gulp, описанных в предыдущей статье “Gulp - знакомство и первый запуск”.
Открываем файл gulpfile.js в редакторе кода (у меня это Sublime Text) и вносим туда следующие строки:
var gulp = require('gulp'),
uglify = require('gulp-uglify');
...
// Gulp Uglify
gulp.task('gulp-uglify', function(){
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('build/js'))
});В принципе, можно и не вводить вышеприведенные строки вручную, а просто скопировать их со страницы описания плагина gulp-uglify. Они размещены в блоке с заголовком Usage.
Но это не главное. Важнее разобраться, что из себя представляет каждая из этих строк. Так вот, строка uglify = require(‘gulp-uglify’) - это создание переменной с именем uglify, в которую помещается плагин gulp-uglify. Обратите внимание на синтаксис этой строки и ее табуляцию - оба аспекта важны и их несоблюдение приведет к тому, что Gulp не будет работать. По большому счету, можно написать и так - var uglify = require(‘gulp-uglify’);, но предыдущая запись является более правильной.
Далее идут строки для новой именованной задачи для Gulp. Имя задачи задаем произвольно и пусть оно будет таким - gulp-uglify. В теле callback-функции пропишем директорию, содержимое которой Gulp должен отслеживать - gulp.src(‘js/*.js’). В данном случае указываем, что Gulp должен следить за изменениями всех файлов с расширением .js, расположенных внутри директории js.
Следующая строка .pipe(uglify()) получает в виде потока содержимое директории js и обрабатывает его с помощью плагина gulp-uglify, помещенного внутрь переменной uglify. Результат обработки передается в виде потока в строку .pipe(gulp.dest(‘build/js’)), которая сохраняет его по пути build/js.
Вот мы и разобрали суть задачи в Gulp! Ведь ничего сложного, правда?!
Запускаем задачу gulp-uglify в Gulp
Переходим от слов к делу и запустим на выполнение только что созданную нами задачу gulp-uglify. Не забываем, что именованные задачи в Gulp запускаются с указанием их имени:
$ gulp gulp-uglify
[21:47:43] Using gulpfile ~/Projects/gulp_test/gulpfile.js
[21:47:43] Starting 'gulp-uglify'...
[21:47:43] Finished 'gulp-uglify' after 12 msВуаля! Видим (по аналогии с предыдушим опытом запуска дефолтной задачи), что именованная задача gulp-uglify успешно запустилась, выполнилась за 12 миллисекунд и также успешно завершилась. По идее, теперь по пути build/js у нас должен располагаться минифицированный js-файл (в моем случае это был jquery-1.11.1.js).
Посмотрим и видим, что так оно и есть, файлик jquery-1.11.1.js помещен туда, куда мы и прописывали:
$ ls build/js/
jquery-1.11.1.jsА точно ли он минифицированный? Это легко проверить - открываем его в Sublime Text и наблюдаем такую картину:
Полезные плагины под Gulp
Мы успешно установили и запустили плагин под Gulp - можно в очередной раз поздравить себя! В данном случае это был плагин gulp-uglify для минификации js-файлов.
Однако, как можно догадаться, существует большое количество других полезных плагинов. Все они устанавливаются и настраиваются точно также, как и рассмотренный нами gulp-uglify.
Ниже я приведу примерный список наиболее полезных плагинов под Gulp, существующих на сегодняшний день:
- gulp-minify-html // минификация HTML-файлов
- gulp-minify-css // минификация CSS-файлов
- gulp-csso // еще один плагин минификации CSS-файлов
- gulp-uglify // минификация JS-файлов
- gulp-sass // компиляция SCSS-файлов в CSS-файлы
- gulp-ruby-sass // компиляции SCSS-файлов в CSS-файлы, более стабильный
- gulp-concat // конкатенация (соединение нескольких файлов в один файл)
- gulp-jshint // ???
- gulp-livereload // запуск плагина LiveReload
- gulp-watch // мониторинг файлов в фоновом режиме в Gulp
- gulp-notify // вывод окна с уведомлением о событиях в Gulp
- gulp-imagemin // сжатие изображений в Gulp
- gulp-rename // переименование файлов в Gulp
- gulp-plumber // настройка обработки ошибок в Gulp