Три кроки до Gulp

І ось нарешті руки дійшли до стартової front-end збірки. Три роки роботи на старій пролетіли дуже швидко, а вона, між тим, встигла пристойно застаріти. Додатковою мотивацією став пресинг від керівництва щодо написання статті в блог. Але разом з інтересом спробувати свіжий Gulp 4 для виробництва з нуля стартової збірки, процес виявився цікавим і нескладним.

Мій особистий профіт за підсумками: два «вбитих зайці» у вигляді виправданої цікавості і спраги пізнання нового, а також задоволене обличчя шефа :)

Збірка важлива

Невеликий відступ для відповіді на питання «а навіщо воно треба?» для тих, хто ніколи не використовував збірки. Процес початку верстки проекту починається зі створення структури теки файлів, підключення необхідних бібліотек як JS, так і CSS. А в фіналі потрібен буде бажано один CSS/JS файл, мініфікований CSS з префіксами і угрупованням селекторів media-запитів. Таким чином, стартова збірка дозволить вам уникнути зайвої витрати часу і значно спростить життя. Моя порада: витратьте один день щоб зробити собі власну збірку, і в майбутньому ви зможете використовувати її роками, витрачаючи всього кілька хвилин на розгортання готового напрацювання під нові проекти.

Отже, для збірки будемо використовувати Gulp 4-ї версії.

Готуємося збирати

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

npm install gulp-cli -g

Створюємо теку проекту і ставимо Gulp.

npm install gulp -D

Створюємо файл 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 і всі залежності проставлятися автоматично.