Сегодня рассмотрим еще один очень нужный и полезный плагин для web-разработчика. Это плагин

1
gulp-livereload
под Gulp, который должен иметь каждый веб-разработчик в своей копилке.

Суть плагина

1
gulp-livereload
в автоматизации обновления страниц в окне браузера. Это тоже самое, что и связка - плагин LiveReload под Sublime Text + плагин LiveReload под браузер. Но в данном случае получается связка - плагин
1
gulp-livereload
+ плагин LiveReload под браузер.

Сказать честно, предыдущий опыт настройки LiveReload, описанный в этой статье - “Установка LiveReload в Sublime Text 2” меня полностью не удовлетворял и я им не пользовался. Причина заключалась в том, что иногда эта связка работала, а иногда - почему-то нет. Нестальность работы плагина под Sublime Text (у меня) отбивала всякое желание иметь с ним дело.

А вот связка плагин

1
gulp-livereload
+ плагин LiveReload под браузер работает стабильно. Кроме того, если Node.js + Gulp уже настроен для текущего проекта, то не возникает никакой проблемы в установке дополнительного плагина
1
gulp-livereload
.

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

Плагин

1
gulp-livereload
проживает по указанному адресу - gulp-livereload. Установка в проект производиться командой:

$ npm install --save-dev gulp-livereload

В виде зависимостей проекта запись в файле

1
package.json
должна выглядеть (как минимум) так:

{
 "name": "test",
 "version": "0.0.1",
 "devDependencies": {
  "gulp": "~3.8.7",
  "gulp-livereload": "~2.1.1"
 }
}

Добавляем переменную

1
livereload
в файл
1
gulpfile.js
для инициализации плагина
1
gulp-livereload
и дальнейшей работы с ним:

var gulp = require('gulp'),
    livereload = require('gulp-livereload');

Установка плагина LiveReload под браузер

Следующим шагом будет установка расширения LiveReload под браузер. В моем случае это будет Mozilla Firefox, однако расширение LiveReload существует и под два других популярных браузера - Google Chrome и Safari.

Для установки расширения под Firefox не стоит искать его на странице расширений Mozilla - LiveReload 0.6.4. Там находится устаревшая версия плагина, которая наверняка не подойдет для вашего браузера.

Лучше посетим домашнюю страницу проекта LiveReload с описанием установки расширений под каждый из браузеров - How do I install and use the browser extensions. Скачиваем по указанной на странице ссылке расширение под нужный браузер (Firefox) и автоматически устанавливаем его.

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

Создание задачи под gulp-livereload

В принципе, плагин

1
gulp-livereload
не требует для себя создания отдельной задачи. Все, что нужно для него - это запуск его как локального сервера. Если вы скажете, что не устанавливали сервер LiveReload, то могу успокоить вас - устанавливали! Инсталляция плагина
1
gulp-livereload
подразумевает автоматическую установку сервера LiveReload.

Поэтому нам нужно всего лишь предварительно активировать, запустить его. Кстати, если у вас вдруг при попытке включения плагина LiveReload в браузере появляется окно с такой ошибкой:

Ошибка запуска сервера LiveReload

… то это говорит всего лишь о том, что перед этим не был запушен в консоли сам сервер LiveReload. Для этого я создам задачу

1
watch
, внутрь которой помещу вызов функции
1
livereload()
:

// Watch Task
 gulp.task('watch', function(){
  livereload.listen();
  gulp.watch('sass/*.scss', ['sass']).on('change', livereload.changed);
});

Все - мне больше ничего не нужно дописывать для задачи компилирования из Sass в CSS (эта задача приведена здесь в качестве примера использования плагина

1
gulp-livereload
):

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

Полностью листинг файла

1
gulpfile.js
в данном случае будет выглядеть таким образом:

var gulp = require('gulp'),
    sassSCSS = require('gulp-sass'),
    minifyHTML = require('gulp-minify-html'),
    rename = require('gulp-rename'),
    livereload = require('gulp-livereload');

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

// Watch Task
 gulp.task('watch', function(){
  livereload.listen();
  gulp.watch('sass/*.scss', ['sass']).on('change', livereload.changed);
});

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

Все готово для тестирования работы плагина

1
gulp-livereload
.

Тестирование плагина gulp-livereload

Осталось выполнить две маленькие вещи. Первая - включаю плагин LiveReload в браузере. Вторая - запускаю Gulp для мониторинга изменений и работы плагина

1
gulp-livereload
:

$ gulp
Using gulpfile ~/Projects/gulp_test/gulpfile.js
Starting 'sass'...
Finished 'sass' after 11 ms
Starting 'watch'...
Finished 'watch' after 17 ms
Starting 'default'...
Finished 'default' after 19 μs
Live reload server listening on: 35729

Видим, как последняя строка в консоли говорит нам, что сервер LiveReload запустился и прослушивает порт по умолчанию - 35729. Вношу изменения в файл стилей

1
style.scss
:

figure{
  border: 1px solid #000;
  padding: 5px;
 }

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

$ gulp
Using gulpfile ~/Projects/gulp_test/gulpfile.js
Starting 'sass'...
Finished 'sass' after 10 ms
Starting 'watch'...
Finished 'watch' after 15 ms
Starting 'default'...
Finished 'default' after 11 μs
Live reload server listening on: 35729
style.scss was reloaded.
Starting 'sass'...
Finished 'sass' after 3.58 ms

Изменение было отслежено, файл перекомпилирован задачей

1
sass
. А что же плагин
1
gulp-livereload
- он тоже подхватил изменения?

Смотрим:

Изменения в gulp-livereload

О, да! Изменение было подхвачено плагином

1
gulp-livereload
- “картинка” в окне браузера изменилась без перезагрузки последнего.

Еще раз проверим и внесем какое-нибудь изменение в файле стилей:

$ gulp
Using gulpfile ~/Projects/gulp_test/gulpfile.js
Starting 'sass'...
Finished 'sass' after 10 ms
Starting 'watch'...
Finished 'watch' after 15 ms
Starting 'default'...
Finished 'default' after 11 μs
Live reload server listening on: 35729
style.scss was reloaded.
Starting 'sass'...
Finished 'sass' after 3.58 ms
style.scss was reloaded.
Starting 'sass'...
Finished 'sass' after 1.97 ms

Изменения в gulp-livereload

Отлично! Вот мы и изучили еще одну полезную сторону работы с Gulp - использование плагина

1
gulp-livereload
.


Крайне необходимая задача, возникающая в работе каждого верстальщика - это оптимизация графики, нарезанной из psd-макета или используемой в HTML-шаблоне.

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

Таким плагином является gulp-imagemin. Он умеет сжимать картинки форматов PNG, JPEG, GIF и SVG. Все остальные (не поддерживаемые) форматы графических файлов просто игнорируются плагином

1
gulp-imagemin
.

Установка gulp-imagemin

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

1
gulp-imagemin
стандартная и производиться командой
1
npm install
с ключом
1
--save-dev
для внесения пакета в список зависимостей проекта:

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

Создание задачи под gulp-imagemin

После установки плагина

1
gulp-imagemin
необходимо создать задачу сжатия картинок под этот плагин. Ничего необычного в этом нет и задача создается стандартно. Сначала создаем переменную
1
imagemin
, в которую помещаем сам плагин
1
gulp-imagemin
:

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

А затем создаем задачу с произвольным именем

1
compress
:

// Compress Task

gulp.task('compress', function() {
  gulp.src('images/*')
  .pipe(imagemin())
  .pipe(gulp.dest('build/images'))
});

Задачу

1
compress
можно запускать однократно вручную или автоматически, доверив это дело Gulp и поместив ее внутрь встроенной функции
1
gulp.watch
.

Создаю в проекте

1
gulp_test
директорию
1
images
и размещаю в ней несколько изображений формата
1
.jpg
, но достаточно большого размера:

$ ls images/
black (22).jpg  black (23).jpg  black (28).jpg  black (31).jpg  black (36).jpg  black (41).jpg

Цель - проверить, действительно ли происходит сжатие графических файлов. Давайте опробуем работу плагина

1
gulp-imagemin
однократно, запустив в консоли команду
1
gulp compress
:

$ gulp compress
Using gulpfile ~/Projects/gulp_test/gulpfile.js
Starting 'compress'...
Finished 'compress' after 8.56 ms
gulp-imagemin: Minified 6 images (saved 83.02 kB - 7.2%)

Отлично! Задача

1
compress
запустилась и выполнилась за 8.56 миллисекунд. При этом было обработано 6 изображений, над которыми была произведена операция сжатия. Экономия размера в результате компресии составила
1
7.2%
.

Давайте посмотрим на изображения в оригинале, расположенные в директории

1
images
:

Оригинальные изображения в проекте

… запомним примерные размеры каждого из файлов. А затем взглянем на содержимое директории

1
build/images/
, в которой располагаются сжатые плагином
1
gulp-imagemin
изображения:

Обработанные плагином gulp-imagemin изображения

Видно при сравнении, что размер графических файлов, пускай и ненамного, но уменьшился.

Gulp-imagemin - автоматический мониторинг

Давайте доведем нашу задачу до логического завершения и настроим Gulp таким образом, чтобы он автоматически отслеживал добавление в директории

1
images
новых изображений.

И как только они появляются там, то немедлено производил бы их сжатие при помощи плагина

1
gulp-imagemin
.

Для этого создам задачу мониторинга

1
watch
:

// Watch Task

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

… которую добавлю в очередь на выполнение для дефолтной задачи

1
default
:

// Default Task

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

Полностью листниг файла

1
gulpfile.js
для данного случая выглядит следующим образом:

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin');

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

// Watch Task
gulp.task('watch', function() {
  gulp.watch('images/*', ['compress']);
});

// Compress Task
gulp.task('compress', function() {
  gulp.src('images/*')
  .pipe(imagemin())
  .pipe(gulp.dest('build/images'));
});

Запускаю в консоли команду

1
gulp
, а затем по одному добавлю в директорию
1
images
два файла-скриншота, созданных мною для этой статьи.

Видим, что каждый раз, как в директорию

1
images
был добавлен файл, Gulp запускал задачу
1
compress
на выполнение:

$ gulp
  Using gulpfile ~/Projects/gulp_test/gulpfile.js
  Starting 'watch'...
  Finished 'watch' after 8.42 ms
  Starting 'default'...
  Finished 'default' after 12 μs
  Starting 'compress'...
  Finished 'compress' after 13 ms
  gulp-imagemin: Minified 7 images (saved 93.43 kB - 7.7%)
  Starting 'compress'...
  Finished 'compress' after 2.13 ms
  gulp-imagemin: Minified 8 images (saved 103.77 kB - 8%)

На выполнение первой задачи ушло 7 миллисекунд:

gulp-imagemin: Minified 7 images (saved 93.43 kB - 7.7%)

… на вторую задачу - 2.13 миллисекунд:

gulp-imagemin: Minified 8 images (saved 103.77 kB - 8%)

При этом я “выиграл”

1
7.7%
и
1
8%
размера, что скажется на скорости загрузки страницы в браузере. Также обратите внимание, что Gulp продолжает работать, находясь в фоновом режиме.

Усложним задачу для gulp-imagemin

Можно немного усложнить и усовершенствовать процесс оптимизации изображений. Для этого немного перепишу задачу

1
compress
таким образом:

// Compress Task
  gulp.task('compress', function() {
    gulp.src('images/*')
    .pipe(imagemin({
      progressive: true
    }))
    .pipe(gulp.dest('images/'));
  });

Первое изменение - это добавлена опция

1
progressive: true
к плагину
1
gulp-imagemin
. Эта опция управляет методом сжатия графических файлов и приведена мною для наглядности примера.

Второе изменение - изменена директория назначения. Теперь директория-источник изображений

1
gulp.src('images/*')
и директория-“выхлоп”
1
gulp.dest('images/')
, куда помещаются обработанные изображения - одна и та же.

Таким образом, достаточно положить в директорию

1
images
какое-либо изображение и оно тут же преобразуется в точно такое же изображение, но меньшего размера! Удобно, не правда ли?

На этом все.


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

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

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

Например, Gulp настроен на автоматическое фиксирование изменений через

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

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

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

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

1
gulp-plumber
.

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

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

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

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

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

Для применения плагина

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

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

А затем дописать строку

1
.pipe(plumber())
в ту задачу, в которой необходимо включить возможность отслеживания ошибок. Например, пусть это будет задача минификации всех js-файлов проекта
1
uglify
. Тогда в ней сразу после строки
1
gulp.src('js/*.js')
добавляем строку
1
.pipe(plumber())
, чтобы отслеживались возможные ошибки во всех нижеследующих задачах, таких как
1
.pipe(uglify())
или
1
.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

Для удобства проверки работы плагина

1
gulp-plumber
создам задачу
1
gulp.watch
и помещу ее в задачу по умолчанию
1
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 в фоновом режиме

Теперь намеренно вношу ошибку в файл

1
jquery-1.11.1.js
и снова перевожу взгзляд на консоль:

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

Отлично! Плагин

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

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

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

Плагин

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


В Gulp имеется встроенная функция

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

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

Gulp watch

Сейчас давайте рассмотрим возможность запуска автоматического мониторинга в Gulp с помощью встроенной функции

1
gulp.watch
. Допустим, у нас имеются две именованные задачи, одна из которых выполняет минификацию js-файлов
1
gulp-uglify
, а вторая - конкатенацию css-файлов
1
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-файлов, а затем сохраним эти изменения.

Для этого создадим еще одну именованную задачу

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

// Watch Task

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

Создаем задачу по имени

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

Первый параметр - что и где Gulp должен отслеживать;

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

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

1
uglify
.

Как видим, имя задачи передается функции

1
gulp.watch
в виде массива; отсюда можно сделать вывод, что задач может быть не одна, а несколько - в виде последовательности.

Перейдем от слов к делу и запустим в консоли выполнение мониторинга с помощью функции

1
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

Видим, что задача по имени

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

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

1
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

Вау! Видим, что в консоли появились две строчки - это отработала задача

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

Давайте немного усложним задачу и добавим мониторинг

1
gulp.watch
в директории
1
css
. При любом изменении файлов в этой папке должна запускаться задача
1
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

Внесем и сохраним изменения в файле

1
normalize.css
, размещенном в директории
1
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

О! Видим, что

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

Мониторинг

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

// Default Task

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

Теперь, если запустить задачу

1
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

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

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

Gulp “повис” в фоновом режиме и отслеживает изменения с помощью функции

1
gulp.watch
в указанных директориях. Проверим это и внесем легкое изменение в любом из файлов (пусть это будут снова
1
normalize.css
и
1
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

Функция

1
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 с помощью функции

1
gulp.watch
!


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

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

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

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

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

1
gulp-concat
. На странице документации этого плагина описан процесс установки и настройки - gulp-concat.

Установим плагин

1
gulp-concat
в проект:

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

И создадим в файле

1
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');

Кстати, если вы еще не задались вопросом, а что это за странные строки -

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

Осталось запустить в консоли именованную задачу (named task)

1
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']);

Теперь в консоли достаточно запустить одну команду

1
gulp
на выполнение задачи по умолчанию (default). Тем самым мы запустим выполнение последовательности нескольких отдельных команд -
1
'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

В выводе консоли видим, что сначала запустилась задача

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

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