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

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

1. Gulp - что это такое и зачем он нужен.
2. Как установить Gulp глобально в системе.
3. Установка Gulp в папку проекта.
4. Создание структуры Gulp проекта.
5. Как создавать задачи (таски) Gulp.
6. Запуск Gulp таска по умолчанию.
7. Методы Gulp.
8. src/dest
9. series/parallel
10. Обновление версий пакетов в package.json
11. Обновление до 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-cli -g

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

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

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

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

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

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

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

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

npm init

Или чтобы быстро создать package.json используйте:

npm init -y

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

Создание файла package.json с командой npm init:

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

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

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

npm i gulp --save-dev

Или

npm i gulp -D

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

Здесь нет -g, т.е. Gulp будет устанавливаться локально в ту папку, в которой была открыта консоль. И появилась запись (флаг) --save-dev (-D), благодаря этому, пакет и его версия будет добавлен в 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 к проекту ,который находится в папке node_modules. Для этого напишем следующий код.

'use strict';

const {src, dest, watch, series, parallel} = require('gulp');

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

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

Задача (функция) в Gulp имеет следующий вид.

function taskName() {
    // что-то делаем

}
exports.taskName = taskName;

Создадим простейшую задачу (функцию), которая будет выводить строку 'Привет, Gulp!'.

function output(callback) {
    console.log('Привет, Gulp!');
    callback();
}
exports.output = output;

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

Выполнение задачи

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

gulp output

Запуск задачи Gulp по умолчанию

Чтобы выполнять задачу output командой gulp, сделаем нашу функцию задачей по умолчанию, присвоив default.

function output(callback) {
    console.log('Привет, Gulp!');
    callback();
}
exports.default = output;

Пока что у нас только одна задача, которая выводит на экран Привет, Gulp!.

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

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

Методы gulp

Мы уже видели в коде выше метод series - который позволяет выполнять перечисляемые задачи последовательно (следующая задача выполняется только после завершения предыдущей). Постепенно мы рассмотрим все методы Gulp.

• src - какие файлы использовать для обработки в потоке;
• dest - куда выгружать обработанные в потоке файлы (место назначения);
• watch - наблюдение за изменениями в файлах;
• series - вызов задач последовательно;
• parallel - вызов задач параллельно.

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

Gulp src / dest

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

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

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

        .pipe(dest('dist/assets/css/'))   // и выгружаем

}
exports.yourTask = yourTask;

В данном примере мы видим работу двух методов:

• src (sourse) - выбираем файлы для обработки;
• dest (destination) - место назначения.

В src мы использовали паттерн css/**.css для выбора всех css файлов внутри папки /assets/css/ (исключая файлы в подпапках, если таковые имеются).

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

• 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 series / parallel

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

exports.default = series(output, otherFunc, otherFunc2);

В series мы перечисляем список задач для последовательного выполенения.

Если нам не важно когда закончится та или иная задача, мы можем использовать метод parallel:

exports.default = series(
    output,
    parallel(otherFunc, otherFunc2),
    otherFunc3
);

В данном примере, сначала выполнится задача output, затем последовательно будут выполняться otherFunc и otherFunc2, и после их завершения начнёт своё выполнение задача otherFunc3.

Установка, подключение и использование плагинов Gulp

Предположим, нам необходим установить плагин del - его используют для удаления файлов и папок.

Это наипростейший пример, но он хорошо демонстрирует последовательность действий.

• 1. Установка.

  npm i del -D

• 2. Подключение.

  const del = require('del');

• 3. Создание задачи

  // Удаление папки «dist»
  
  function clean() {
      return del('./dist/');
  }
  exports.clean = clean;

Просмотр списка задач Gulp

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

gulp --tasks

Обновление плагинов (версий пакетов)

Чтобы проверить наличие новых версий плагинов (пакетов) в package.json, установим npm-check. Данный плагин может не только находить устаревшие зависимости, но так же неправильные и неиспользованные.

Установка.

npm install -g npm-check

Проверка.

npm-check

Обновление в автоматичском режиме.

npm-check -u

Или же можете самостоятельно обновить/установить/удалить нужный пакет следуя предложенным командам.

Gulp 4

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

Простейший способ реанимировать ваш 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'));

Статьи про Gulp

1. Текущая статья - Gulp для ускорения разработки (1 часть).
2. Использование SASS в Gulp проекте (2 часть).
3. Автоматическое обновление страницы при измении кода (3 часть).