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

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

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

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

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

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

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

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

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

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

// Compress Task

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

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

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

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

Цель - проверить, действительно ли происходит сжатие графических файлов. Давайте опробуем работу плагина gulp-imagemin однократно, запустив в консоли команду 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%)

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

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

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

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

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

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

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

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

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

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

// Watch Task

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

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

// Default Task

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

Полностью листниг файла 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'));
});

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

Видим, что каждый раз, как в директорию images был добавлен файл, Gulp запускал задачу 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%)

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

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

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

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

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

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

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

На этом все.


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

И даже если установлены такие палочки-выручалочки, как 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, в одну задачу можно добавлять не два плагина, а гораздо больше.