Учебники

Gulp — Объединение задач

Январь 4, 2019

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

gulp.task('task-name', function() {
   //do stuff here
});

Где «task-name» — это имя строки, а «function ()» выполняет вашу задачу. «Gulp.task» регистрирует функцию как задачу в имени и определяет зависимости от других задач.

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

Давайте возьмем один плагин под названием minify-css, чтобы объединить и минимизировать все CSS-скрипты. Его можно установить с помощью npm, как показано в следующей команде — 

npm install gulp-minify-css --save-dev

Для работы с «плагином gulp-minify-css» вам необходимо установить другой плагин под названием «gulp-autoprefixer», как показано в следующей команде: 

npm install gulp-autoprefixer --save-dev

Чтобы объединить файлы CSS, установите gulp-concat, как показано в следующей команде: 

npm install gulp-concat --save-dev

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

var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');

Добавление задачи в файл Gulp

Нам нужно создать задачу для каждой зависимости, которую мы добавим при установке плагинов. Задание Gulp будет иметь следующую структуру: 

gulp.task('styles', function() {
   gulp.src(['src/styles/*.css'])
   .pipe(concat('styles.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'));
});

Плагин concat объединяет CSS-файлы, а плагин autoprefix указывает текущую и предыдущие версии всех браузеров. Он минимизирует все CSS-скрипты из папки src и копирует в папку сборки, вызывая метод ‘dest’ с аргументом, который представляет целевой каталог.

Чтобы запустить задачу, используйте следующую команду в каталоге вашего проекта — 

gulp styles

Точно так же мы будем использовать другой плагин под названием «gulp-imagemin» для сжатия файла изображения, который можно установить с помощью следующей команды: 

npm install gulp-imagemin --save-dev

Вы можете добавить зависимости в свой файл конфигурации, используя следующую команду — 

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

Вы можете создать задачу для определенной выше зависимости, как показано в следующем коде. 

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';
   
   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

Изображения находятся в «src / images / ** / *», которые сохраняются в img_srcobject. Он передается другим функциям, созданным конструктором imagemin. Он сжимает изображения из папки src и копирует в папку сборки, вызывая метод dest с аргументом, который представляет целевой каталог.

Чтобы запустить задачу, используйте следующую команду в каталоге вашего проекта — 

gulp imagemin

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

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

gulp.task('default', ['imagemin', 'styles'], function() {

});

Файл Gulp настроен и готов к выполнению. Запустите следующую команду в каталоге вашего проекта, чтобы запустить вышеупомянутые комбинированные задачи — 

gulp

Запустив задачу с помощью приведенной выше команды, вы получите следующий результат в командной строке:

45
Share: