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

В предыдущей статье “Gulp - знакомство и первый запуск”” мы познакомились с установкой менеджера Gulp и запуском первой задачи под него. В этой статье мы перейдем к еще более интересному материалу, в котором узнаем, как устанавливать и запускать плагины под Gulp на примере одного из них - gulp-uglify.

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

Каждый из плагинов - это код, решающий только одну задачу. Например, один плагин умеет сжимать изображения, другой сжимает js-файлы, третий сжимает css-файлы; еще один умеет компилировать scss-файлы в css-файлы. И так далее - список можно продолжать и продолжать.

Становиться понятно, что для конкретной задачи нам нужно установить нужный плагин и создать задачу (task) в файле

1

gulpfile.js

Давайте рассмотрим процесс установки плагинов и настройки задач на примере одного из них -

1

gulp-uglify

Все плагины под Gulp размещены по этому адресу - Gulp Plugins. В строке поиска нужно вводить имя искомого плагина, в результате получаем (или не получаем) страницу с описанием плагина и командой для его установки.

Устанавливаем gulp-uglify под Gulp

На странице плагина gulp-uglify описана команда установки этого плагина, которую мы повторим для себя, в своем проекте:

$ npm install --save-dev gulp-uglify

Опять таки, ключ

1

--save-dev

1

npm

1

gulp-uglify

1

package.json

$ cat package.json
{
  "name": "first",
  "version": "0.0.1",
  "devDependencies": {
    "gulp": "~3.8.7",
    "gulp-uglify": "~0.3.1"
  }
}

Создаем задачу gulp-uglify под Gulp

Плагин

1

gulp-uglify

1

gulpfile.js

Открываем файл

1

gulpfile.js

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.

Но это не главное. Важнее разобраться, что из себя представляет каждая из этих строк. Так вот, строка

1

uglify = require('gulp-uglify')

1

uglify

1

gulp-uglify

1

var uglify = require('gulp-uglify');

Далее идут строки для новой именованной задачи для Gulp. Имя задачи задаем произвольно и пусть оно будет таким -

1

gulp-uglify

1

gulp.src('js/*.js')

1

js

Следующая строка

1

.pipe(uglify())

1

js

1

gulp-uglify

1

uglify

1

.pipe(gulp.dest('build/js'))

1

build/js

Вот мы и разобрали суть задачи в Gulp! Ведь ничего сложного, правда?!

Запускаем задачу gulp-uglify в Gulp

Переходим от слов к делу и запустим на выполнение только что созданную нами задачу

1

gulp-uglify

$ 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

Вуаля! Видим (по аналогии с предыдушим опытом запуска дефолтной задачи), что именованная задача

1

gulp-uglify

1

build/js

1

jquery-1.11.1.js

Посмотрим и видим, что так оно и есть, файлик

1

jquery-1.11.1.js

$ ls build/js/
jquery-1.11.1.js

А точно ли он минифицированный? Это легко проверить - открываем его в Sublime Text и наблюдаем такую картину:

Полезные плагины под Gulp

Мы успешно установили и запустили плагин под Gulp - можно в очередной раз поздравить себя! В данном случае это был плагин

1

gulp-uglify

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

1

gulp-uglify

Ниже я приведу примерный список наиболее полезных плагинов под Gulp, существующих на сегодняшний день:

• 1	gulp-minify-html

  // минификация HTML-файлов

• 1	gulp-minify-css

  // минификация CSS-файлов

• 1

  gulp-csso

  // еще один плагин минификации CSS-файлов

• 1	gulp-uglify

  // минификация JS-файлов

• 1

  gulp-sass

  // компиляция SCSS-файлов в CSS-файлы

• 1	gulp-ruby-sass

  // компиляции SCSS-файлов в CSS-файлы, более стабильный

• 1	gulp-concat

  // конкатенация (соединение нескольких файлов в один файл)

• 1	gulp-jshint

  // ???

• 1	gulp-livereload

  // запуск плагина LiveReload

• 1	gulp-watch

  // мониторинг файлов в фоновом режиме в Gulp

• 1	gulp-notify

  // вывод окна с уведомлением о событиях в Gulp

• 1	gulp-imagemin

  // сжатие изображений в Gulp

• 1	gulp-rename

  // переименование файлов в Gulp

• 1	gulp-plumber

  // настройка обработки ошибок в Gulp