Урок Комбинирование Gulp-задач

[TaLLeR43]

Давайте подведём итоги проделанной работы. На данный момент мы создали два разных набора gulp-задач.

Первый набор предназначен для процесса разработки, в этом наборе мы компилировали Sass в CSS, отслеживали изменения и перезагружали браузер.

Второй набор предназначен для процесса оптимизации, в этом наборе готовим все файлы для рабочего веб-сайта. В данном процессе мы оптимизировали такие ресурсы, как CSS, JavaScript и изображения, а также копировали шрифты из папки app в dist.

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

gulp.task('watch', ['browserSync', 'sass'], function (){
  // …отслеживание
})

Второй набор состоит из задач, которые нужно выполнить для создания рабочего веб-сайта. Этот набор включает в себя задачи clean:dist, sass, useref, images и fonts.

Если бы мы пошли схожим путём, то создали бы задачу build, которая объединила бы все задачи вместе.

gulp.task('build', ['clean', 'sass', 'useref', 'images', 'fonts'], function (){
  console.log('Построение файлов…');
})

К сожалению, так мы не сможем написать задачу build, потому что Gulp активирует все задачи во втором аргументе одновременно. Существует вероятность того, что задачи useref, images или даже fonts завершатся раньше задачи clean, в таком случае удалится вся папка dist.

Итак, для гарантии того, что очистка завершится до выполнения остальных задач, нам нужно использовать дополнительный плагин под названием Run Sequence.
$ npm install run-sequence --save-dev

Вот синтаксис выполнения последовательности задач:

var runSequence = require('run-sequence');

gulp.task('имя-задачи', function(callback) {
  runSequence('задача-один', 'задача-два', 'задача-три', callback);
});

Когда вызывается «имя-задачи», Gulp сначала запускает «задача-один». Когда эта задача завершается, Gulp автоматически запускает «задача-два». Наконец, когда «задача-два» выполнена, Gulp запускает «задача-три».

Run Sequence также позволяет запускать задачи одновременно, если поместить их в массив:

gulp.task('task-name', function(callback) {
  runSequence('задача-один', ['задача-два','выполняется','параллельно'], 'задача-три', callback);
});

В данном случае Gulp сначала запускает «задача-один». Когда эта задача завершена, Gulp одновременно запускает каждую задачу во втором аргументе. Все задачи в этом втором аргументе должны быть выполнены до запуска «задача-три».

Теперь мы можем создать задачу, которая гарантирует, что сначала запустится clean: dist, а затем все остальные задачи:

gulp.task('build', function (callback) {
  runSequence('clean:dist',
    ['sass', 'useref', 'images', 'fonts'],
    callback
  )
})

Будем последовательны и проделаем то же самое с первой группой. На этот раз в качестве имени задачи укажем default:

gulp.task('default', function (callback) {
  runSequence(['sass','browserSync', 'watch'],
    callback
  )
})

Почему default? Потому что, когда у вас есть задача с таким именем, её можно выполнить, просто набрав команду gulp.

И, наконец, вот репозиторий GitHub для всей работы, которую мы проделали!