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

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

Что такое Gulp

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

Gulp имеет множество плагинов, которые могут быть использованы для выполнения различных задач. Плагины могут быть установлены через пакетный менеджер npm и подключены к файлу "gulpfile.js".

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

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

Gulp — это инструмент для автоматизации задач веб-разработки. Он может использоваться для выполнения различных задач, таких как:

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

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

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

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

Для работы с Gulp нужно установить Node.js. Скачать его можно по ссылке: https://nodejs.org/en/download/.

Этот движок занимается процессом чтения и записи данных — потоков. Потоки предлагают удобный интерфейс для асинхронной работы с данными. Node.js вызывает соответствующие колбэки при появлении новой порции данных, возникновении ошибки, окончании потока и т.д. Таким образом, достигается эффективность ввода и вывода при минимальных затратах со стороны программиста.

Node.js является независимой платформой и может работать на различных операционных системах, таких как Windows, macOS и Linux.

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

После того как установили Node.js. Откройте командную строку и введите команду:

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 в своей работе. Gulp действительно является мощным инструментом при сборке проектов и web-приложений. Он позволяет автоматизировать многие рутинные задачи, такие как компиляция Sass в CSS, сжатие и оптимизация изображений, сборка и минификация JavaScript-файлов, сборка HTML-шаблонов и многое другое. Благодаря Gulp, разработчики компании Alto значительно ускоряют свой рабочий процесс и снижают вероятность ошибок, связанных с ручной обработкой файлов.

Кроме того, Gulp имеет множество плагинов, которые значительно расширяют его возможности. Это позволяет разработчикам создавать индивидуальные рабочие процессы, которые наилучшим образом соответствуют их потребностям. Благодаря этому, использование Gulp становится не только эффективным, но и гибким инструментом в работе с проектами. Например, при создании интернет-магазина или разработке личного кабинета.

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