Что такое Gulp и как с ним работать

Антон Тимин
Антон Тимин PHP программист
18.04.2018

    В нашей компании проводятся еженедельные обучения для программистов. В этот раз мы разбирались с инструментом для автоматизации повторяющихся задач - 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-приложений.

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

    Читайте далее
    Разработка
    Как перенести сайт 1С:Битрикс на другой хостинг: пошаговая инструкция
    Перенос сайта 1С:Битрикс на другой хостинг
    Разработка
    Резервное копирование и восстановление сайта на 1С-Битрикс: все способы восстановления и создания бэкапа
    Резервное копирование и восстановление сайта на 1С-Битрикс
    Разработка
    Подключение JS в Bitrix: все способы в системе управления 1С-Битрикс
    Как подключить JS в Bitrix
    Разработка
    Настраиваем web-сервера, nginx и apache на одном сервере
    Настраиваем веб-сервер — nginx и apache на одном сервере
    Разработка
    Что такое Gulp и зачем нужен: как с ним работать, установка, примеры
    Что такое Gulp и как с ним работать
    Разработка
    Как добавить пиксель на сайт своими руками в 2022 году?
    Как добавить пиксель на сайт
    Разработка
    Кэширование данных в Bitrix: настройка, как это работает, что это такое
    Кэширование данных в Bitrix
    Разработка
    Cron в Битриксе - функционал Агентов для регулярных задач
    Cron в Битриксе
    Разработка
    Как установить Bitrix своими руками: инструкция
    Установка Bitrix
    Разработка
    Сортировка товаров в каталоге по цене в 1С Битриксе
    Сортировка по цене в Битриксе