Gulp для ускорения разработки

Что такое Gulp, зачем он нужен, его возможности, как установить и как начать использовать в разработке сайтов.

1. Gulp - что это такое и зачем он нужен.
2. Как установить Gulp глобально в системе.
3. Установка Gulp в папку проекта.
4. Создание структуры Gulp проекта.
5. Как создавать задачи (таски) Gulp.
6. Запуск Gulp таска по умолчанию.
7. Методы Gulp.
8. Обновление до Gulp 4

Gulp - что это такое и зачем он нужен

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

Возможности Gulp:

1. Автоматическая перезагрузка страницы при сохранении кода
2. Использование препроцессоров для CSS (например, Sass), для JavaScript (например, CoffeeScript), для HTML (например, Pug)
3. Минификация CSS, JavaScript, HTML (уменьшение размера кода путём удаления ненужных символов и пробелов)
4. Соединение файлов в один (например, из пяти CSS файлов сделать один файл CSS)
5. Создание, удаление и переименование файлов и папок проекта
6. Автоматическое создание вендорных префиксов (-webkit, -moz, -o, -ms), чтобы старые версии браузеров поддерживали все css-свойства
7. Оптимизация изображений
8. И многое другое.

Как установить Gulp глобально в системе

Установка Gulp глобально необходима для того, чтобы была доступна команда gulp в окне команд / bash.

Для установки Gulp нам понадобится пакетный менеджер npm, который входит в состав Node.js. С помощью npm мы будем устанавливать пакеты в каталог node_modules. Если Node.js не установлен, то устанавливаем его. Далее можно начать установку Gulp.

Открыть командную строку и ввести следующий текст:

npm i gulp -g

Коротко о том, что это значит:

• npm - это менеджер пакетов, с помощью которого будем устанавливать Gulp
• i (install) - означает установка
• gulp - это установка Gulp
• -g (global) - установить глобально, а не в какую-то конкретную папку

Gulp установлен глобально. Приступим к установке Gulp в папку проекта.

Установка Gulp в папку проекта

Нам также необходимо установить Gulp локально в папке проекта, чтобы мы могли его подключать в gulpfile.js - require('gulp').

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

Создадим корневую папку для нашего проекта. Назовём, например, gulp-project. Зайдём в неё, зажмём клавишу shift и выберем в контекстном меню пункт Открыть PowerShell здесь или Открыть окно команд.

Введём следующий текст для создания файла package.json.

npm init

Этот файл будет содержать всю информацию о проекте (название, описание, автор и т.д.), а так же об используемых зависимостях в проекте.

Начнём создание файла package.json

Вводим имя проекта, описание и автора, остальные пункты оставить по умолчанию, нажатием клавиши "Enter". Ответив на все вопросы, будет создан файл package.json.

Теперь мы можем установить Gulp в наш проект, а именно в папку gulp-project, которую мы создавали для нашего проекта.

Для установки Gulp в нашу папку воспользуемся командой:

npm i gulp --save-dev

Есть несколько отличий от установки Gulp глобально.

Здесь нет -g, т.е. Gulp будет устанавливаться локально в ту папку, в которой была открыта консоль. И появилась запись (флаг) --save-dev, благодаря этому, пакет и его версия будет добавлен в package.json. Это нужно для последующей быстрой установки пакетов в других проектах путём копирования файла package.json

После установки gulp мы увидим примерно следующее:

Мы установили Gulp в нашу папку gulp-project, в которой появилась новая папка node_modules. В ней и находится Gulp, а так же будут храниться все зависимости нашего проекта.

Так же если зайти в package.json, то увидим изменения:

Создание структуры Gulp проекта

Структура может быть практически любой, но я рекомендую именно такую, она наиболее распространённая:

• app/ - рабочая папка проекта, в ней будут находиться все исходники - шрифты, изображения, css и js файлы.
• dist/ - папка продакшена, в ней будет находиться готовый оптимизированный проект
• node_modules/ - папка с модулями и зависимостями
• gulpfile.js - файл конфигурации, в котором будем описывать все задачи Gulp
• package.json - файл, содержащий информацию о проекте (название, описание, автор и т.д.)

Как создавать задачи (таски) Gulp

Создадим файл gulpfile.js и начнём его заполнение.

Сначала нужно подключить Gulp к проекту. Для этого нужно создать переменную и присвоить ей имя пакета (в данном случаем мы подключаем сам gulp), который находится в папке node_modules. Для этого напишем следующий текст.

'use strict';

const gulp = require('gulp');

Теперь Gulp подключен к нашему проекту. Таким образом, мы будем подключать все плагины (пакеты) для Gulp.

Таск (задача) в Gulp имеет следующий вид.

gulp.task('taskName', () => {
    // что-то делаем

});

Создадим простейший task, который будет выводить строку 'Привет, Мир!'.

gulp.task('output', function(callback) {
    console.log('Привет, Мир!');
    callback();
});

'output' - имя таска (задачи), оно может быть любым.

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

gulp output

Запуск gulp таска по умолчанию

Таск будет выполнять все перечисленные в ней таски одной командой gulp

// Gulp 3

gulp.task('default', ['output']);

// Gulp 4

gulp.task('default', gulp.parallel('output'));

И теперь чтобы запустить наш таск, достаточно просто написать gulp

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

// Gulp 3

gulp.task('default', ['output', 'other-task-1', 'other-task-2']);

// Gulp 4

gulp.task('default', gulp.parallel('output', 'other-task-1', 'other-task-2'));

Это был самый простой пример работы Gulp. Для более сложных задач используются дополнительные методы.

Методы gulp

• gulp.task - создание таска
• gulp.src - какие файлы использовать для обработки плагином
• gulp.watch - наблюдение за изменениями в файлах
• .pipe(plugin()) - обращение к плагину для обработки файлов
• .pipe(gulp.dest('путь')) - куда записать (выгрузить) файл после выполнения задачи.

Как создавать таски (задачи) мы рассмотрели. Теперь рассмотрим, как выбирать необходимые файлы.

Gulp.src

Сначала рассмотрим пример, затем уже разберём какие паттерны (выборки) для выбора файлов можно использовать.

gulp.task('taskName', function () {
    return gulp.src('app/css/**/*.css') // выбираем все css-файлы

        // что-то делаем

        .pipe(gulp.dest('dest/css')))
});

Это наиболее использумый вариант выбора файлов. Примеры паттернов для gulp.src:

• app/**/*.* - выбор всех файлов в папке app;
• app/js/**/*.js - выбор всех js файлов в папке js;
• app/**/*.{css,js} - все css и js файлы в папке app;
• app/{folder1,folder2}/**/*.{js,css} - все js и css-файлы в папках folder1 и folder2;
• ['app/**/*.css', 'app/**/*.js'] - получаем сначала все css, потом все js в папке app;
• ['app/**/*.*', '!app/**/*.js'] - все файлы в папке app, кроме js-файлов. (! - знак исключения).

Gulp 4

Если у вас не работает Gulp, возможно вы обновили его с 3 версии до Gulp 4 в пакетном менеджере npm. В связи с этим появились ошибки в gulpfile.js из-за изменений в синтаксисе выполнения gulp тасков

Все конструкции с квадратными скобками "[" "]" нужно заменить на gulp.parallel()

Пример:

// у вас было:

gulp.task('watch', ['sass', 'js', 'browser-sync'], function() {
  gulp.watch('sass/**/*.sass', ['sass']);
  gulp.watch(['libs/**/*.js', 'js/common.js'], ['js']);
  gulp.watch('*.html', browsersync.reload)
});
gulp.task('default', ['watch']);

Нужно заменить для Gulp 4.

gulp.task('html', function() {
  return gulp.src('*.html')
  .pipe(browserSync.reload({ stream: true }))
});

gulp.task('watch', gulp.parallel('sass', 'js', 'browser-sync'), function() {
  gulp.watch('sass/**/*.sass', gulp.parallel('sass');
  gulp.watch(['libs/**/*.js', 'js/common.js'], gulp.parallel('js'));
  gulp.watch('*.html', gulp.parallel('html'))
});
gulp.task('default', gulp.parallel('watch'));

Полезные ссылки

• Официальный сайт Node.js.
• Официальный сайт Gulp.