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

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

Содержание:

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

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. Для этого напишем следующий код.

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 (source) — выбираем файлы для обработки;
• 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 lastRun()

Используется для ускорения времени выполнения, за счёт пропуска файлов, которые не изменились с момента последнего успешного завершения задачи.

Пример:

const { src, dest, lastRun, watch } = require("gulp");
const imagemin = require("gulp-imagemin");

function images() {
    return src("app/assets/images/**/*.jpg", { since: lastRun(images) })
        .pipe(imagemin())
        .pipe(dest("dist/assets/img/"));
}

exports.default = function () {
    watch("app/assets/images/**/*.jpg", images);
};

Установка, подключение и использование плагинов 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

• Введение в Gulp (1 часть — текущая).
• Использование SASS в Gulp (2 часть).
• Автоматическое обновление страницы с помощью browser-sync для Gulp (3 часть).
• Использование Babel в Gulp (4 часть).
• Моментальная загрузка сайта на хостинг и синхронизация файлов — gulp-rsync (5 часть).