Gulp - установка и запуск плагина gulp-uglify

Reading time ~5 minutes

В предыдущей статье “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-uglify файл в Gulp

Полезные плагины под 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

Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке