Gulp - именованная задача (named task)

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

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

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

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

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

1

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

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

1

concat

$ 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

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

1

uglify

1

default

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