Три шага к Gulp

13 Июня 2019

Николай Гоцалюк

Frontend TeamLead

И вот наконец руки дошли до стартовой front-end сборки. Три года работы на старой пролетели очень быстро, а она, между тем, успела здорово устареть. Дополнительной мотивацией сделать стал прессинг от начальства по написанию статьи в блог. Но вместе с интересом попробовать свежий Gulp 4 для производства с нуля стартовой сборки, процесс оказался увлекательным и несложным.

Мой личный профит по итогам: два “убитых зайца” в виде оправданного любопытства и жажды познания нового, а также удовлетворенное лицо шефа :)

Сборка важна

Небольшое отступление для ответа на вопрос “а зачем оно надо?” Для тех, кто никогда не использовал сборки, процесс начала верстки проекта начинается с создания структуры папок и файлов, подключения необходимых библиотек как js так и css. А в финале нужен будет желательно один css/js файл, минифицирован css c префиксами и группировкой селекторов media-запросов. Таким образом, стартовая сборка позволит вам избежать лишней траты времени и значительно упростит жизнь. Мой совет: потратьте один день чтобы сделать себе собственную сборку и в будущем вы сможете использовать её годами, тратя всего несколько минут на развертывание готовой наработки под новые проекты.

И так, для сборки будем использовать Gulp 4-й версии.

Готовимся собирать

Для начала убедитесь, что у вас установлен node.js. Если его нет, отвлекитесь и установите — потом будет труднее. Теперь установим gulp-cli:

npm install gulp-cli -g

Создаем папку проекта и ставим Gulp.

npm install gulp -D

Cоздаем файл package.json. В нем будет хранится вся необходимая информация о проекте и используемых модулях, а также будут указаны модули для автоматической установки при развертывании сборки:

Создать package.json можно с помощью команды:

npm init -y

Далее создаем структуру проекта:

Во избежание вопросов по-поводу scss и отсутствия css заранее предупреждаю, что я влюблен в препроцессор и без него работать не могу. И не буду.

Итак, мы будем работать в папке src. В папке build будет находится готовый проект, который, к слову, и будет видеть браузер в дальнейшем.

Далее создаем в корневом каталоге проекта файл gulpfile.js и подключим в нем наш Gulp:

const gulp = require('gulp');

А теперь я объясню всю соль Gulp на примере простейшего таска:

			 const gulp = require('gulp');

 

			 function htmlBuild() {

			   return gulp.src('src/*.html')

			               .pipe(gulp.dest('buld/'));

			 }

 

			 gulp.task('html', htmlBuild);

Если теперь написать в консоле команду gulp html, мы запустим функцию htmlBuild, которая переложит все html-файлы из папки src в папку build и на данном этапе начинается вся магия Gulp’a. Все преобразования мы будем делать в промежутке между gulp.src() и gulp.dest() при помощи .pipe() — он будет нам позволять вставлять промежуточные обработчики в поток (подобный функционал реализован в RxJS).

Три шага

Итак, это надо продемонстрировать наглядно на примере модуля gulp-concat. Для начала смотрим документацию и делаем эти 3 шага:

1-й шаг — установка:

npm install --save-dev gulp-concat

К слову, так будут ставится все Gulp-модули. После установки обратите внимание на package.json:

Модуль (и все последующие модули) прописался в зависимостях именно отсюда. В дальнейшем при развертывании проекта будут проставляться все нужные модули и писать каждый раз npm install --save-dev gulp-concat будет не нужно.

2-й шаг — подключение:

3-й шаг — использование:

Модуль предназначен для слияния многих файлов в один и в данном случае мы соберем все js-файли в папке plugins в один файл lib.js

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

 

			 gulp.task('scripts', function() {

			   return gulp.src('src/js/plugins/*.js')

			       .pipe(concat('lib.js'))

			       .pipe(gulp.dest('build/js/'));

			 });

Так как мы зарегистрировали новый таск scripts, можем вызвать его из консоли:

gulp scripts

И увидим результат (я специально набросаю плагинов для примера):

Далее давайте создадим таск build, который будет исполнять оба наших таска. Так сказать, пришло время комбинировать:

			 gulp.task('build', gulp.parallel('html', 'scripts'));

С помощью .parallel() (это фича нового Gulp) мы запустим два асинхронных потока, в которых будут исполнятся наши таски.

Далее нам понадобится очищать каждый раз папку build, чтоб избежать накопления ненужных файлов вследствии переименования или удаления их в папке src. Для этого я использую модуль del, но, обратите внимание, что это сторонний не gulp-модуль. Его можно установить следующим образом:

npm install del --save-dev

Подключение:

del = require('del')

Использование:

			 gulp.task('clearBuild', function() {

			   return del(['build/*'])

			 });

Чистку мы не можем проводить асинхронно, потому что она может отработать после таска, который помещает нужные файли в build. Поэтому будем запускать по очереди, для чего воспользуемся другой фичей нового Gulp .series() и поправим таск build:

			 gulp.task('build',

			   gulp.series(

			       'clearBuild',

			       gulp.parallel('html', 'scripts')

			   )

			 );

Теперь у нас сначала очиститься папка build и только потом запустятся асинхроные потоки.

Следующим шагом добавим обработку стилей. Я буду использовать gulp-sass; делаем все те же три шага:

Установка:

npm install node-sass gulp-sass --save-dev

Подключение:

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

Используем:

			 gulp.task(css, function() {

			   return gulp.src('src/scss/**/*.scss')

			       .pipe(sass().on('error', sass.logError))

			       .pipe(concat('lib.css'))

			       .pipe(autoprefix({

			         browsers: ['> 0.1%'],

			         cascade: false

			       }))

			       .pipe(gulp.dest('build/css/'));

			 });

Кроме препроцессора соберем весь css в один файл с помощью concat(). Кроме того я использовал gulp-autoprefixer() для автоматической подстановки префиксов.

Следующим действием добавим таски обработки для картинок и шрифтов. Сразу же отредактируем таск build. В данной статье для экономии времени я не буду использовать модули минификации изображений типа gulp-imagemin.

			 gulp.task('img', function() {

			   return gulp.src('src/img/**/*.*')

			       .pipe(gulp.dest('build/img/'));

			 });

			 gulp.task('fonts', function() {

			   return gulp.src('src/fonts/**/*.*')

			       .pipe(gulp.dest('build/fonts/'));

			 });

 

			 gulp.task('build',

			   gulp.series(

			       'clearBuild',

			       gulp.parallel('html', 'scripts', 'scriptsDev', ‘css’, 'fonts', 'img' )

			   )

			 );

Почти готово

На данном этапе у нас есть неплохое ядро, уже пригодное для работы. Но мы будем еще больше упрощать себе жизнь, чтобы, например, после каждого изменения в css/js/html нам было не нужно лазить в консоль и перезапускать таск, создадим вотчер — наблюдатель, который сам будет следить за файлами и при каждом изменении будет перезапускать таск.

			 gulp.task('watch', function() {

			  gulp.watch('src/scss/*.scss', gulp.series('css'));

			  gulp.watch('src/js/plugins/*.js', gulp.series('scripts'));

			  gulp.watch('src/*.html',  gulp.series('html'));

			 });

Watch() принимает два параметра: первый — источник за которым будет наблюдать вотчер; второй — в старом Gulp 3-й версии имя вызываемого таска, но в Gulp 4-й версии тут нужна функция, так что воспользуемся gulp.series с именем таска.

Настроим дефолтный таск, который будет вызываться при команде gulp в консоле:

			 gulp.task('default', gulp.series('build', 'watch'));

После запуска дефолтного таска консоль перешла в режим ожидания:

Теперь при изменениях файлов, они автоматически будут обновляться и в build версии

Но и еще больше упростит жизнь browser-sync! Он развернет виртуальный узел для работы в браузере и заставит браузер реагировать на нужные нам изменения. Также есть синхронизация работы разных браузеров. Если у вас открыт проект в двух разных браузерах, вы сможете заметить, что при скроле или клике в одном из них ивенты передаются на другой. Это сторонняя библиотека, поэтому внимательно смотрим документацию для Gulp 4. Три шага:

Установка:

npm install browser-sync gulp --save-dev

Подключение:

const browserSync = require('browser-sync').create();

Для инициализации нам потребуется конфиг:

			 const config = {

			   server: {

			       baseDir: "./build"

			   },

			   tunnel: false,

			   host: 'localhost',

			   port: 3333

			 };

Инициализировать будем в вотчере, так как это самая удобная и логичная точка.

А также заставим обновляться браузер при изменении html разметки:

			 gulp.task('watch', function() {

			   browserSync.init(config);

			   gulp.watch('src/scss/*.scss', gulp.series('css'));

			   gulp.watch('src/js/plugins/*.js', gulp.series('scripts'));

			   gulp.watch('src/*.html',  gulp.series('html')).on('change', browserSync.reload);

			 });

И обновлять поток для стилей и скриптов:

Запускаем новую сборку!

Давайте наконец запустим нашу сборку с помощью команды gulp:

Теперь у нас развернут локальный сервер и открылся браузер на вкладке с адресом http://localhost:3333. Можно работать!

На этом пока все. В заключение скажу, что еще есть много хороших модулей. Если эта статья наберет тысячу лайков, то следующую я посвящу отдельно разным модулям. Вы же можете расширять свою сборку нужными вам и все они будут добавляться в devDependencies в файле package.json.

Далее для развертывания проекта вам достаточно будет написать команду npm install и все зависимости проставляться автоматически.