Кто не знаком с тем, что при написании кода очень часто возникают ошибки или банальные опечатки?

И даже если установлены такие палочки-выручалочки, как Emmet, это не всегда спасает из ситуации. А если представить, что вы пишете большой проект и в нем закралась ошибка, то нелегко будет ее найти в куче кода.

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

Например, Gulp настроен на автоматическое фиксирование изменений через gulp.watch. Если возникла ошибка, то выполнение мониторинга в Gulp прерывается:

Прерванная работа Gulp

Но даже в этом случае довольно трудно разобраться, где именно закралась ошибка. В этой ситуации может помочь плагин gulp-plumber, который формирует вывод об ошибке. Но при этом работа Gulp не прерывается.

Давайте установим и попробуем в работе плагин gulp-plumber.

Установка плагина gulp-plumber

Установка плагина gulp-plumber стандартная, через менеджер пакетов npm с ключом --save-dev:

$ sudo npm install --save-dev gulp-plumber

Использование плагина gulp-plumber

Для применения плагина gulp-plumber в проекте необходимо создать переменную plumber:

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

А затем дописать строку .pipe(plumber()) в ту задачу, в которой необходимо включить возможность отслеживания ошибок. Например, пусть это будет задача минификации всех js-файлов проекта uglify. Тогда в ней сразу после строки gulp.src('js/*.js') добавляем строку .pipe(plumber()), чтобы отслеживались возможные ошибки во всех нижеследующих задачах, таких как .pipe(uglify()) или .pipe(gulp.dest('build/js')):

// Uglify Task
gulp.task('uglify', function(){
  gulp.src('js/*.js')
    .pipe(plumber()) // plumber
    .pipe(uglify())
    .pipe(gulp.dest('build/js'))
});

Точно также можно поступить, если необходим контроль ошибок в другой задаче, к примеру конкатенации CSS-файлов:

// Concat Task
gulp.task('concat', function(){
  gulp.src('css/*.css')
    .pipe(plumber())
    .pipe(concatCSS('concatenate.css'))
    .pipe(minifyCSS())
    .pipe(gulp.dest('build/css'))
});

Запуск мониторинга ошибок gulp-plumber

Для удобства проверки работы плагина gulp-plumber создам задачу gulp.watch и помещу ее в задачу по умолчанию default:

// Watch Task
gulp.task('watch', function() {
  gulp.watch('js/*.js', ['uglify']);
  gulp.watch('css/*.css', ['concat']);
});

// Default Task
gulp.task('default', ['watch']);

Запускаю в консоли процесс мониторинга в Gulp командой:

$ gulp

… и смотрю на вывод в консоли:

Gulp в фоновом режиме

Теперь намеренно вношу ошибку в файл jquery-1.11.1.js и снова перевожу взгзляд на консоль:

Плагин gulp-plumber отследил ошибку

Отлично! Плагин gulp-plumber выполнил свою задачу - сформировал ясный и четкий отчет об ошибке. И при этом не прервал работу самого Gulp.

Возвратим все назад и исправим ошибку, допущенную ранее. Снова взглянем на консоль:

Плагин gulp-plumber - ошибка исправлена

Плагин gulp-plumber снова справился со своей задачей - ошибка нами исправлена и он прилежно ее зафиксировал.


В Gulp имеется встроенная функция gulp.watch для отслеживания изменений в любом из файлов проекта.

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

Gulp watch

Сейчас давайте рассмотрим возможность запуска автоматического мониторинга в Gulp с помощью встроенной функции gulp.watch. Допустим, у нас имеются две именованные задачи, одна из которых выполняет минификацию js-файлов gulp-uglify, а вторая - конкатенацию css-файлов gulp-concat:

// Uglify Task

gulp.task('uglify', function(){
  gulp.src('js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('build/js'))
});

// Concat Task

gulp.task('concat', function() {
  gulp.src('css/*.css')
    .pipe(concat('one.css'))
    .pipe(gulp.dest('build/css'))
});

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

Для этого создадим еще одну именованную задачу watch, цель которой - отслеживание изменений в указанных файлах. Создаем все как обычно (или - почти как обычно):

// Watch Task

gulp.task('watch', function(){
  gulp.watch('js/*.js', ['uglify']);
});

Создаем задачу по имени watch, а внутри тела функции поместим встроенную функцию gulp.watch. В качестве аргументов этой функции мы передаем ей два параметра.

Первый параметр - что и где Gulp должен отслеживать; js/*.js говорит о том, что необходимо отслеживать изменения всех файлов с расширением .js, помещенных в директории js.

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

Как видим, имя задачи передается функции gulp.watch в виде массива; отсюда можно сделать вывод, что задач может быть не одна, а несколько - в виде последовательности.

Перейдем от слов к делу и запустим в консоли выполнение мониторинга с помощью функции gulp.watch. Команда для мониторинга в Gulp выглядит таким образом:

$ gulp watch
  [10:55:26] Using gulpfile ~/Projects/gulp_test/gulpfile.js
  [10:55:26] Starting 'watch'...
  [10:55:26] Finished 'watch' after 7.06 ms

Видим, что задача по имени watch запустилась и вроде как закончилась (Finished 'watch' after 7.06 ms). Но на самом деле Gulp находиться в фоновом режиме и отслеживает изменения js-файлов.

Чтобы проверить это, отредактируем и сохраним js-файл (в моем случае это jquery.js):

$ gulp watch
    [10:55:26] Using gulpfile ~/Projects/gulp_test/gulpfile.js
    [10:55:26] Starting 'watch'...
    [10:55:26] Finished 'watch' after 7.06 ms
    [10:59:17] Starting 'uglify'...
    [10:59:17] Finished 'uglify' after 8.96 ms

Вау! Видим, что в консоли появились две строчки - это отработала задача uglify. То есть, Gulp “увидел”, что я внес изменение в файле jquery.js и мгновенно запустил задачу uglify, чтобы зафиксировать это изменение. Мониторинг с помощью функции gulp.watch работает!

Давайте немного усложним задачу и добавим мониторинг gulp.watch в директории css. При любом изменении файлов в этой папке должна запускаться задача concat:

// Watch Task
  gulp.task('watch', function() {
    gulp.watch('js/*.js', ['uglify']);
    gulp.watch('css/*.css', ['concat']);
  });

Снова запустим Gulp для мониторинга изменений в проекте.

Кстати, а вы знаете, как останавливать Gulp, запущенный в фоновом режиме? Если нет, то это просто - в консоли Linux это выполняется сочетанием клавиш Ctrl+C.

$ gulp watch
    [11:08:55] Using gulpfile ~/Projects/gulp_test/gulpfile.js
    [11:08:55] Starting 'watch'...
    [11:08:55] Finished 'watch' after 8.24 ms

Внесем и сохраним изменения в файле normalize.css, размещенном в директории css. Вернемся в консоль:

$ gulp watch
    [11:08:55] Using gulpfile ~/Projects/gulp_test/gulpfile.js
    [11:08:55] Starting 'watch'...
    [11:08:55] Finished 'watch' after 8.24 ms
    [11:11:04] Starting 'concat'...
    [11:11:04] Finished 'concat' after 9.12 ms

О! Видим, что gulp.watch “подхватил” изменение в файле normalize.css и запустил соответствующую этому изменению задачу concat. Отлично - все работает!

Мониторинг gulp.watch можно добавить в задачу по умолчанию (default). Давайте создадим такую конструкцию:

// Default Task

  gulp.task('default', ['concat', 'uglify', 'watch']);

Теперь, если запустить задачу default в консоли, то увидим следующее:

$ gulp
    [11:20:44] Using gulpfile ~/Projects/gulp_test/gulpfile.js
    [11:20:44] Starting 'concat'...
    [11:20:44] Finished 'concat' after 7.18 ms
    [11:20:44] Starting 'uglify'...
    [11:20:44] Finished 'uglify' after 2.65 ms
    [11:20:44] Starting 'watch'...
    [11:20:44] Finished 'watch' after 7.96 ms
    [11:20:44] Starting 'default'...
    [11:20:44] Finished 'default' after 7.23 μs

Задачи запустились и выполнились именно в той последовательности, в какой они прописаны в массиве. Сперва выполнились две задачи на конкатенацию concat и минификацию uglify, а затем запустилась задача на мониторинг watch.

Gulp “повис” в фоновом режиме и отслеживает изменения с помощью функции gulp.watch в указанных директориях. Проверим это и внесем легкое изменение в любом из файлов (пусть это будут снова normalize.css и jquery.js):

$ gulp
    [11:20:44] Using gulpfile ~/Projects/gulp_test/gulpfile.js
    [11:20:44] Starting 'concat'...
    [11:20:44] Finished 'concat' after 7.18 ms
    [11:20:44] Starting 'uglify'...
    [11:20:44] Finished 'uglify' after 2.65 ms
    [11:20:44] Starting 'watch'...
    [11:20:44] Finished 'watch' after 7.96 ms
    [11:20:44] Starting 'default'...
    [11:20:44] Finished 'default' after 7.23 μs
    [11:26:31] Starting 'concat'...
    [11:26:31] Finished 'concat' after 2.37 ms
    [11:26:46] Starting 'uglify'...
    [11:26:46] Finished 'uglify' after 1.49 ms

Функция gulp.watch прилежно отследила оба эти изменения и запустила соотвествующие им задачи:

...
  [11:26:31] Starting 'concat'...
  [11:26:31] Finished 'concat' after 2.37 ms
  [11:26:46] Starting 'uglify'...
  [11:26:46] Finished 'uglify' after 1.49 ms

Отлично! Мы изучили вопрос создания задачи мониторинга в Gulp с помощью функции gulp.watch!


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

Сами не зная того, тогда мы создали именованную задачу (named task). Как вы помните из вводной статьи “Gulp - знакомство и первый запуск”, в этом менеджере имеется два типа задач - задача по умолчанию (default) и именованная задача (named task).

В этом разделе мы углубимся в вопрос задач в Gulp и рассмотрим детально, каким образом создается именованная задача (named task) или несколько именованных задач (named tasks), как можно объединять именованные задачи (named tasks) в последовательности, как можно вызывать выполнение одной задачи из другой задачи.

Создание named task в Gulp

В менеджере Gulp может существовать тысячи задач, каждая из которых нацелена на получение конкретного результата. Давайте создадим отдельную задачу для конкатенации файлов. Для этой цели существует плагин gulp-concat. На странице документации этого плагина описан процесс установки и настройки - gulp-concat.

Установим плагин gulp-concat в проект:

$ sudo npm install --save-dev gulp-concat

И создадим в файле gulpfile.js отдельную задачу для этого плагина:

// Concat Task
  gulp.task('concat', function() {
    gulp.src('css/*.css')
    .pipe(concat('one.css'))
    .pipe(gulp.dest('build/css'))
  })

… а также создадим отдельную переменную для этого плагина:

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

Кстати, если вы еще не задались вопросом, а что это за странные строки - gulp.src, gulp.dest, gulp.task, то могу вкратце сказать, что это встроенные функции Gulp, каждая из которых выполняет свою задачу.

Осталось запустить в консоли именованную задачу (named task) concat, которая произведет слияние в один файл всех файлов с расширением .css, расположенных в директории css:

$ gulp concat
  [09:53:28] Using gulpfile ~/Projects/gulp_test/gulpfile.js
  [09:53:28] Starting 'concat'...
  [09:53:28] Finished 'concat' after 9.91 ms

Отлично - мы создали named task!

Создание последовательности named tasks в Gulp

В Gulp можно создавать последовательность задач, в которой выполнение всех задач будет производиться в том порядке, в котором они помещены в очередь. Для этого несколько отдельных именованных задач (named tasks) помещают внутрь задачи по умолчанию (default).

Вместо callback-функции разместим массив, состоящий из списка имен тех именованных задач (named tasks), которые мы хотим поместить в очередь. Фактически, в данном случае выполнение одной задачи будет производиться через вызов другой задачи.

Допустим, у нас имеются две именованные задачи (named tasks):

// Uglify Task
gulp.task('uglify', function(){
  gulp.src('js/*.js')
  .pipe(uglify())
  .pipe(gulp.dest('build/js'))
});

// Concat Task
gulp.task('concat', function() {
  gulp.src('css/*.css')
  .pipe(concat('one.css'))
  .pipe(gulp.dest('build/css'))
});

Поместим их в задачу по умолчанию:

// Default Task
  gulp.task('default', ['concat', 'uglify']);

Теперь в консоли достаточно запустить одну команду gulp на выполнение задачи по умолчанию (default). Тем самым мы запустим выполнение последовательности нескольких отдельных команд - 'concat', 'uglify':

$ gulp
  [10:05:36] Using gulpfile ~/Projects/gulp_test/gulpfile.js
  [10:05:36] Starting 'concat'...
  [10:05:36] Finished 'concat' after 7.17 ms
  [10:05:36] Starting 'uglify'...
  [10:05:36] Finished 'uglify' after 2.64 ms
  [10:05:36] Starting 'default'...
  [10:05:36] Finished 'default' after 7.04 μs

В выводе консоли видим, что сначала запустилась задача concat и выполнилась за 7.17 миллисекунд, затем запустилась задача uglify и на ее выполнение ушло 2.64 милисекунды. И затем запустилась задача по умолчанию default, которая выполнилась за 7.04 миллисекунд.

Все прошло успешно.


Рассмотрим очень нужный и полезный плагин gulp-ruby-sass под Gulp для компиляции файлов Sass в файлы формата CSS. Для разработчиков, которые пользуются препроцессором Sass данный плагин gulp-ruby-sass просто необходим.

Для компиляции Sass в CSS под Gulp имеется несколько плагинов. Например, gulp-sass или gulp-ruby-sass. Более стабильным плагином является gulp-ruby-sass. Вот его мы и установим.

Установка плагина gulp-ruby-sass

Команда установки уже стандартная для нас:

$ sudo npm install --save-dev gulp-ruby-sass

В директории sass заранее помещены мною два scss-файла main.scss и style.scss:

$ ls sass/
main.scss  style.scss

После этого создаю именованную задачу sass для плагина gulp-ruby-sass:

// Sass Compile Task
gulp.task('sass', function() {
  gulp.src('sass/**/*.scss')
  .pipe(sass())
  .pipe(gulp.dest('build/css'))
});

И запускаем задачу sass:

$ gulp sass
  [14:31:48] Using gulpfile ~/Projects/gulp_test/gulpfile.js
  [14:31:48] Starting 'sass'...
  [14:31:48] Finished 'sass' after 12 ms
  [14:31:49] gulp-ruby-sass: directory
  [14:31:49] gulp-ruby-sass: write main.css
  [14:31:49] gulp-ruby-sass: write style.css

Оба файла скомпилированы main.scss и style.scss и помещены по пути build/css:

$ ls build/css/
  main.css  one.css  style.css

Взглянем на содержимое хотя бы одного из них (пускай это будет main.css), чтобы убедиться в том, что это уже CSS-файл, а не SCSS-файл:

Компиляция Sass в CSS с помощью gulp-ruby-sass

Да, действительно, перед нами CSS-файл!

Добавление опций к плагину gulp-ruby-sass

До этого момента все плагины, которые мы устанавливали и настраивали в виде задач, были без опций. То есть, в потоке мы просто вызывали плагин через переменную и передавали ему данные для обработки. На этом работа плагина заканчивалась.

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

Что касается плагина gulp-ruby-sass, то данный плагин может производить компиляцию из Sass в CSS несколькими способами. Достаточно почитать раздел API к документации к нему - gulp-ruby-sass.

Мы же воспользуемся всего одной опцией из этого списка и сделаем так, чтобы результат компиляции был более сжатым. Для этого немного изменим созданную ранее задачу sass и добавим опцию style: 'compressed' к переменной sass:

// Sass Compile Task
gulp.task('sass', function() {
  gulp.src('sass/**/*.scss')
  .pipe(sass({
    style: 'compressed'
  }))
  .pipe(gulp.dest('build/css'))
});

Снова запустим задачу sass из консоли:

$ gulp sass
  [14:52:57] Using gulpfile ~/Projects/gulp_test/gulpfile.js
  [14:52:57] Starting 'sass'...
  [14:52:57] Finished 'sass' after 8.68 ms
  [14:52:58] gulp-ruby-sass: directory
  [14:52:58] gulp-ruby-sass: write main.css
  [14:52:58] gulp-ruby-sass: write style.css

И взглянем на результат компиляции файла main.scss в файл main.css:

Компиляция gulp-ruby-sass с опцией compressed

Отлично! Видим, что плагин gulp-ruby-sass действительно отработал с опцией compressed и произвел не просто компиляцию из SCSS в CSS, но и сжатие CSS-файла main.css - удалены все лишние пробелы и табуляция, выкинуты лишние точки с запятой, а все CSS-правила размещены в одну строку.

Объединение нескольких плагинов в одной задаче

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

Чтобы было более понятно, разберем все вышесказанное на живом примере. Дополним задачу sass плагином конкатенации, чтобы “склеить” два результирующих файла main.css и style.css в один файл compile.css. Как вы уже догадались, для этой цели мы воспользуемся уже установленным ранее плагином gulp-concat.

Видоизменим задачу sass, добавив строку .pipe(concat('compile.css')) после строки с вызовом плагина gulp-ruby-sass:

// Sass Compile Task
  gulp.task('sass', function() {
    gulp.src('sass/**/*.scss')
    .pipe(sass({
      style: 'compressed'
    }))
    .pipe(concat('compile.css'))
    .pipe(gulp.dest('build/css'))
  });

Вновь запустим в консоли задачу sass:

$ gulp sass
  [15:14:44] Using gulpfile ~/Projects/gulp_test/gulpfile.js
  [15:14:44] Starting 'sass'...
  [15:14:44] Finished 'sass' after 9.05 ms
  [15:14:45] gulp-ruby-sass: directory
  [15:14:45] gulp-ruby-sass: write main.css
  [15:14:45] gulp-ruby-sass: write style.css

Посмотрим содержимое по пути build/css:

aaron@zmk ~/Projects/gulp_test $ ls build/css/
  compile.css  one.css

Файл compile.css появился по указанному пути. Взглянем на его содержимое в редакторе Sublime Text:

Компиляция gulp-ruby-sass и конкатенация Sass в CSS под Gulp

Пример получился не совсем удачный, но, тем не менее, наглядный. Видим, чтобы оба плагина отработали. Была произведена компиляция, а затем “склейка” двух файлов в один.

Конечно, благодаря поточности в Gulp, в одну задачу можно добавлять не два плагина, а гораздо больше.


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