Что такое Gulp и зачем нужен: как с ним работать, установка, примеры

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

Однотипные задачи неизбежны при сборке проектов. На их решение может уйти ни один час работы и выполнение последовательных операций. Одним словом - рутина.

Если вы часто сталкиваетесь с компиляцией Sass/Less в CCS, минификацией, конкатенацией файлов css/js, обработкой изображений и далее по списку, то наверняка слышали о Gulp. Или использовали аналогичные инструменты, вроде Grunt.

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

Какие задачи решает Gulp:

Работа с Javascript, HTML и CSS-файлами - минимизация и конкатенация отдельных файлов в один;
Использование CSS препроцессоров Sass, Less, Stylus, Jade и т.д.;
Работа с изображениями - оптимизация и сжатие;
Автоматическая простановка вендорных префиксов для CSS;
Удаление неиспользуемого CSS (UnCSS);
Валидация кода и его тестирование.

Без должной подготовки непросто использовать Gulp на постоянной основе. Для начала стоит детально рассмотреть, на каких принципах построен gulp.

Для работы с Gulp нужно установить Node.js. Скачать его можно по ссылке: https://nodejs.org/en/download/. Этот движок занимается процессом чтения и записи данных - потоков. Потоки предлагают удобный интерфейс для асинхронной работы с данными. Node.js вызывает соответствующие колбэки при появлении новой порции данных, возникновении ошибки, окончании потока и т.д. Таким образом, достигается эффективность ввода и вывода при минимальных затратах со стороны программиста.

Инструкция по работе с Gulp

У вас уже должен быть установлен Node.js. Откройте командную строку и введите команду:

Установка Gulp глобально

npm i gulp -g

npm install – это команда, которую использует Node Package Manager для установки Gulp на компьютер.

Флаг -g указывает, что Gulp надо установить на компьютер глобально, для использования в любом месте системы.

Создание проекта

Команда npm init создает файл package.json, который содержит информацию о проекте (описание проекта и зависимости).

npm init

Чтобы добавить gulp в новый проект для разработки, пишем:

npm install gulp-watch --save-dev

Для того, чтобы развернуть имеющийся проект в package.json

npm install

Для выполнения каждой задачи в gulp есть свой плагин. Установить основные плагины для разработки вы можете по ссылке: http://gulpjs.com/plugins/

Нам понадобятся:

npm install gulp-watch --save-dev
npm install gulp-sass --save-dev
npm install gulp-rigger --save-dev
npm install gulp-rename --save-dev
npm install gulp-imagemin --save-dev
npm install imagemin-pngquant --save-dev
npm install imagemin-jpegoptim --save-dev
npm install imagemin-mozjpeg --save-dev
npm install gulp-autoprefixer --save-dev
npm install gulp-uglify --save-dev
npm install gulp-cssnano --save-dev
npm install gulp-util --save-dev
npm install gulp-cache --save-dev

Основные понятия Gulp

gulpfile.js

Файл gulpfile.js находится в корне папки проекта. Он содержит все инструкции - какие модули используются, какие задачи выполняются. В начале файла подключается сам Gulp и его модули, которые будут использованы:

var
    gulp = require('gulp'),
    watch = require('gulp-watch'),
    sass = require('gulp-sass'),
    rigger = require('gulp-rigger'),
    rename = require('gulp-rename'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    jpegoptim = require('imagemin-jpegoptim'),
    mozjpeg = require('imagemin-mozjpeg'),
    autoprefixer = require('gulp-autoprefixer'),
    uglify = require('gulp-uglify'),
    svgmin = require('gulp-svgmin'),
    cssnano = require('gulp-cssnano'),
    gutil = require('gulp-util'),
    cache = require('gulp-cache');

Task

Это команда, которая должна быть описана в gulpfile.js для вызова в последующей работе. Его синтаксис описания:

gulp.task('mytask', function(){
    // код функции
   console.log('Hello world!');
});

Task вызывается из консоли как

gulp mytask

Выборка файлов для обработки - gulp.src

Он служит для выборки файлов, над которыми будет выполняться task:

gulp.src( path_to_files )

Для обработки всех jpg из папки src/img

gulp.src( 'src/img/*.jpg')

Для обработки всех jpg из папки src/img, включая подпапки

gulp.src( 'src/img/**/*.jpg')

Для обработки всех jpg и png из папки src/img включая подпапки

gulp.src( 'src/img/**/*.+(png|jpg)')

Можно задавать несколько условий выборки файлов в виде массива.

gulp.src(['src/js/*.js', 'src/another_js/*.js'])

Можно задавать исключения, используя “!”. Обработка всех файлов js из папки src/js кроме файла src/js/js.js

gulp.src(['src/js/*.js', '!src/js/js.js'])

Вызов плагина для обработки - .pipe()

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

pipe( plugin() )

Для последовательной обработки файла несколькими плагинами pipe соединяются в цепочку

pipe( plugin1() ).pipe( plugin2() ).pipe( plugin3() )

Вывод результата - gulp.dest

gulp.dest( path_to_files )

path_to_files - это папка, в которую надо сохранить результат обработки. Например:

gulp.dest('www/js/')

Описание Task

gulp.task('mytask', function(){
    return gulp.src('src/js/*.js')       // выборка js-файлов из src/js/
    .pipe(uglify())                      // минификация js плагином uglify
    .pipe(rename({suffix: '.min'}))      // добавление суффикса .min
    .pipe(gulp.dest('www/js/'));        // сохранение в www/js/
});

Watch

Позволяет отслеживать изменения файлов и запускать соответствующие таски gulp.watch( path_to_files, [‘task_name’] ); path_to_files - файлы, за которыми следим [‘task_name’] - массив с названиями тасков, которые надо запускать при изменении файлов.

Пример:

gulp.watch('src/js/**/*.js', ['js']);

Start

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

gulp.start('task_name');

Основные задачи и плагины

CSS и препроцессоры

С помощью плагина gulp-sass - мы можем компилировать SCSS в CSS.
gulp-less - компилирует LESS в CSS.
gulp-autoprefixer - добавляет префиксы браузеров для нестандартных CSS свойств.
Плагин gulp-cssnano - минифицирует все.

Пример таска

gulp.task('scss', function(){
    return gulp.src('src/scss/*.scss')
    .pipe(sass().on('error', gutil.log))
    .pipe(autoprefixer({
        browsers: ['since 2011'],
        cascade: false
    }))
    .pipe(gulp.dest('www/files/css'))
    .pipe(cssnano())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('www/files/css'));
});

При работе с JS

Используем плагин gulp-uglify.

Пример:

gulp.task('js', function(){
    return gulp.src('src/js/*.js')
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('www/files/js/'));
});

Сжатие изображений

Используем плагины:

для png - imagemin-pngquant

Пример:

.pipe( imagemin([ pngquant({quality: 90}) ],{verbose:true}) )

для jpg - imagemin-jpegoptim, imagemin-mozjpeg

Пример:

.pipe( imagemin([ mozjpeg({quality: 85}) ],{verbose:true}) )

Включение кода другого файла gulp-rigger

Работает любом файле - js, css, scss. Он удобен для сборки в один файл, если нужно учитывать порядок включения файлов.

//= folder/file.js

В дальнейшем заменяется на код файла.

gulp-cache

Обеспечивает кэширование результатов обработки файлов.

Использование:

.pipe( cache( plugin() ) )

Пример:

gulp.task('jpeg', function(){
    return gulp.src('src/img/**/*.jpg')
    .pipe(
        cache(
        imagemin([ mozjpeg({quality: 85}) ],{verbose:true})
        )
    )
    .pipe(gulp.dest('www/files/img'));
});

Обработка ошибок

Если в процессе обработки файла возникает ошибка, то весь таск прерывается. Дальнейшие файлы не обрабатываются.

Если таск был запущен через watch и запустился после изменения файла, то при ошибке в нем будет прервано и дальнейшее наблюдение за файлами. Чтобы такого не происходило надо отлавливать ошибки. Это делает плагин gulp-util. Его надо подключить в начале gulpfile.js.

var gutil = require('gulp-util');

Добавить к каждому плагину, у которого возможна ошибка:

.on('error', gutil.log)

Ошибка будет выведена в консоль, но наблюдение и обработка файлов продолжится.

Пример:

gulp.task('js', function(){
    gulp.src('src/js/*.js')
    .pipe(rigger().on('error', gutil.log))
    .pipe(gulp.dest('www/files/js/'));
});

Надеемся, что вам удалось применить Gulp в своей работе. На данный момент он является более эффективным инструментом при сборке проектов и web-приложений.

Также советуем вам просмотреть интересный кейс.