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

Что такое Gulp, зачем он нужен, его возможности, как установить и как начать использовать в разработке сайтов. Обновление до 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 нам понадобится пакетный менеджер npm, который входит в состав Node.js. С помощью npm мы будем устанавливать пакеты в каталог node_modules. Если Node.js не установлен, то устанавливаем его. Далее можно начать установку Gulp.

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

npm i gulp -g

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

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

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

Установка 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 к проекту. Для этого нужно ввести переменную и присвоить ей имя пакета, который находится в папке node_modules. Для этого напишем следующий текст:

var gulp = require('gulp');

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

Gulp таск имеет следующий вид:

// Gulp 3

gulp.task('имя-таска',['имя-другого-таска'], function() {
 таск(и)
});

// Gulp 4

gulp.task('имя-таска', gulp.parallel('имя-другого-таска'), function() {
 таск(и)
});

['имя-другого-таска'] или gulp.parallel('имя-другого-таска') - это необходимо писать в том случае, если до выполнения нашего таска нужно выполнить другой таск(и).

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

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

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

Для вызова таска нужно выполнить команду 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 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.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