Внедрение gulp: установка, настройка и результаты

Лонгрид про установку, настройку и результаты интеграции gulp в мой самописный блог на NestJS, Express и nginx.

Для тех, кто не в курсе: gulp — инструмент автоматизации процесса сборки проекта. Прямой альтернативой является grunt, хотя gulp можно назвать более элегантным из братьев.

Да, gulp, может быть, не такой мощный как webpack, но это гибкая и расширяемая альтернатива скриптам из package.json, а также достаточная старая и стабильная технология, чтобы быть предпочтительнее модного webpack, который может уйти из употребления за пару недель.

• Время изучения документации: меньше часа
• Время интеграции технологии: около часа
• Результат: заметный

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

• компиляцию typescript
• компиляцию sass
• минификацию css и js
• копирование ассетов и статичных файлов
• переименование .env и .yml конфигов
• сборку папки для копирования по ftp

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

Установка gulp

Глобально установим cli пакет gulp (для взаимодействия с консолью)

npm install -g gulp-cli

Добавим gulp в проект и package.json

npm install --save-dev gulp

Проверим установку gulp.

gulp --version

В результате вы должны увидеть версии глобальной и локальной установок.

В корне проекта создадим gulpfile.js, где мы будем создавать наши задания:

var gulp = require('gulp');

Все дальнейшие добавления будут вноситься в него же.

Интеграция gulp и typescript

Для начала установим пакет для их интенрации

npm i --save-dev gulp-typescript

Теперь допишем задачи в gulpfile:

var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json');

gulp.task('default', function ()
{
    return tsProject.src()
        .pipe(tsProject())
        .js.pipe(gulp.dest('bin'));
});

Интеграция gulp и sass

Установим пакет для интеграции компилятора sass в gulp.

npm i --save-dev gulp-sass

И добавим задачи в gulpfile

var sass = require('gulp-sass');

gulp.task('sass', function ()
{
    return gulp.src('assets/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('www/'));
});

gulp.task('sass:watch', function ()
{
    gulp.watch('./sass/**/*.scss', ['sass']);
});

Если коротко, в качестве аргумента к src() мы задаем регулярное выражение (или массив оных), определяющих файлы для pipeline. Затем мы передаем их в pipe компилятора sass, а gulp.dest() сохраняет файлы в папку www.

Минифицируем javascript

Всё как в прошлых шагах, установим пакет минификации:

npm i --save-dev gulp-minify

И добавим в сборочный gulpfile:

const minify = require('gulp-minify');

gulp.task("minify", function ()
{
    return gulp.src("assets/*.js")
        .pipe(minify())
        .pipe(gulp.dest('www'))
})

Копируем статичные файлы с gulp

Небольшая задача, которая скопирует все файлы кроме .js и .scss в папку www. Исходные файлы js и scss будут скопированы в ходе минификации и компиляции, соответственно.

gulp.task("assets", function ()
{
    return gulp.src(['assets/**/*', '!*.js', "!*.scss"])
        .pipe(gulp.dest('www/'));
})

Единый скрипт сборки

Теперь соберём все задачи в единый скрипт сборки, для этого используем gulp.series.

exports.build = gulp.series("default", "minify", 'sass', "assets");

Задача build будет состоять из последовательного выполнения задач default, minify, sass и assets.

Проверка и использование

Давайте теперь попробуем запустить сборку. Для этого напишем в командной строке gulp build.

Большинство IDE и редакторов кода автоматически обнаружат задачи из gulp, но вы можете продублировать их в package.json для большей понятности.

Результат интеграции

Сборка проекта значительно ускорилась, но в то же время разбиение задач на мелкие подзадачи позволило автоматизировать некоторые более редкие процессы. Теперь сборка папки www для деплоя на сервер занимает меньше 10 секунд, в то время как до этого не это тратилось до 10 минут.