Gulp для ускорения разработки
Что такое Gulp, зачем он нужен, его возможности, как установить и как начать использовать в разработке сайтов.
Содержание:
- Gulp — что это такое и зачем он нужен.
- Как установить Gulp глобально в системе.
- Установка Gulp в папку проекта.
- Создание структуры Gulp проекта.
- Как создавать задачи (таски) Gulp.
- Запуск нужной задачи.
- Запуск Gulp таска по умолчанию.
- Методы Gulp.
- Установка, подключение и использование плагинов Gulp
- Просмотр списка задач Gulp
- Обновление версий пакетов в package.json
Gulp — что это такое и зачем он нужен
Gulp — это инструмент, позволяющий ускорить процесс web-разработки. Gulp автоматически выполняет все самые необходимые часто используемые задачи.
Возможности Gulp:
- Автоматическая перезагрузка страницы при сохранении кода
- Использование препроцессоров для CSS (например, Sass), для JavaScript (например, CoffeeScript), для HTML (например, Pug)
- Минификация CSS, JavaScript, HTML (уменьшение размера кода путём удаления ненужных символов и пробелов)
- Соединение файлов в один (например, из пяти CSS файлов сделать один файл CSS)
- Создание, удаление и переименование файлов и папок проекта
- Автоматическое создание вендорных префиксов (-webkit, -moz, -o, -ms), чтобы старые версии браузеров поддерживали все css-свойства
- Оптимизация изображений
- И многое другое.
Как установить 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 проекта
Структура может быть практически любой. У нас будет следующая:
- gulp-project/
- app/
- assets/
- css/
- fonts/
- img/
- js/
- libs/
- sass/
- index.html
- assets/
- dist/
- node_modules/
- gulpfile.js
- package.json
- app/
Пояснение:
- 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 часть).
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями: