Створення першого завдання

Тепер наші необхідні інструменти встановлені і ми можемо почати реальну роботу — створити наше завдання (мінімізація CSS).

Щоб повідомити Gulp, які завдання він повинен запускати, ми повинні створити спеціальний файл, який міститиме список завдань — файл з ім'ям gulpfile.js.

Отже, повернемося до папки нашого проекту і створимо gulpfile.js. Після цього папка повинна виглядати так:

• Build
  • index.html
  • package.json
  • gulpfile.js

До того як Gulp запустить наші завдання, йому також потрібні деякі інші інструменти (пакети) для допомоги. У системі Gulp є практично будь-яке завдання для всього, про що ви тільки можете подумати (ви можете переглянути пакети тут).

Так що відредагуємо наш gulpfile.js та додамо список усіх необхідних пакетів/залежностей. Для нашої мети (мінімізація CSS) нам потрібен пакет з ім'ям gulp-minify-css.

Для перерахування пакетів у gulpfile.js нам не потрібно відкривати файл у текстовому редакторі, просто потрібно виконати наступну команду:

>

<code>npm install--save-dev gulp-minify-css

Після цього папка node_model знову зміниться і буде виглядати так:

• Build/
  • index.html
  • package.json
  • gulpfile.js
  • node_modules/
    • gulp/
    • gulp-minify-css/

Це означає, що ми готові почати. Тепер відкрийте файл gulpfile.js у текстовому редакторі та додайте наступний код:

<code data-language="javascript">var gulp=require('gulp'); var minifyCss=require('gulp-minify-css'); gulp.task('mincss', function(){ var fb=gulp.src('main.css'); fb.pipe(minifyCss()); fb.pipe(gulp.dest('main')); return fb;});

Перевіримо і переконаємося, що це саме те, що нам потрібно для створення CSS-файлу. Зробіть CSS-файл у корені нашого проекту, назвіть його main.css та відкрийте текстовим редактором. Ваша папка має виглядати так:

• Build/
  • index.html
  • package.json
  • gulpfile.js
  • node_modules/
    • gulp/
    • gulp-minify-css/
  • main.css

Введіть наступний код у CSS:

body{ margin:0; padding:0; background-color:teal; }

На даний момент нічого серйозного не відбувається. Тепер відкрийте командний рядок, перейдіть в корінь проекту та введіть наступну команду:

<code>gulp mincss

Нова папка з ім'ям main має з'явитися у проекті з файлом main. css всередині. Якщо ви відкриєте цей файл, ви повинні побачити всередині ваш мінімізований CSS. У моєму випадку я отримав таке:

body{margin:0;padding:0;background-color:teal}

Виглядає чудово!

Пояснення того, що дійсно сталося

Все сталося так швидко, що ви не могли бачити, що трапилося насправді і якщо я це не поясню, ви будете мене Ненавидіти.

Насправді, як ви могли помітити, всю роботу робить gulpfile.js. І якщо ми розглянемо його, то побачимо два основні розділи:

Перший: розділ з require

<code data-language="javascript">var gulp=require('gulp') ; var minifyCss=require('gulp-minify-css');

Ці два рядки імпортують gulp і gulp-minify-css. Це як require() в PHP.

І другий: розділ визначення завдань

<code data-language="javascript"> gulp.task('mincss', function(){ var fb=gulp.src('main.css'); fb.pipe(minifyCss()); fb.pipe(gulp.dest('main')); return fb;});

Тут дозвольте мені переключити вашу увагу на інше. Другий розділ був написаний таким чином, щоб показати (початківцям або тим, хто не звик до JavaScript) різні рядки в коді окремо. У звичайних ситуаціях ви будете писати його наступним чином і так я робитиму наступного разу:

<code data-language="javascript">gulp.task('mincss', function(){ return gulp. src('main.css') .pipe(minifyCss()) .pipe(gulp.dest('main')); });

Ця частина бере функцію gulp.task() і передає їй два параметри: бажане ім'я для нашого завдання (mincss в моєму випадку) та замикання (function()).

Тіло замикання використовує концепцію під назвою перетікання, яка дозволяє передавати дані через безліч функцій (потік) і отримувати дані назад в кінці в іншій формі, подібно до реальної труби. Ви пропускаєте через трубу воду, ставите в якомусь місці фільтр і коли вода проходить через нього вона фільтрується і на виході виходить чиста вода. Отже, спочатку ми вказуємо для Gulp файл, який хочемо пропустити по трубі:

<code data-language="javascript">gulp.src('main.css')

Потім пропускаємо його через функцію minifyCss(), яка мінімізує наш CSS та відправляє його в наступну функцію:

<code data-language="javascript">.pipe(minifyCss())

Далі вказуємо Gulp, де розмістити мінімізований CSS-файл:

<code data-language="javascript">.pipe(gulp.dest('main'));</code> 

Для тих, хто віддає перевагу ілюстраціям, ви можете наочно все побачити на наступній картинці:

Резюме

Це лише вершина айсберга. Є ще багато всього, що ви можете зробити. Ви можете бачити, що кожного разу при зміні файлу CSS вам потрібно повернутися до командного рядка для запуску gulp mincss з метою його мінімізації. Ми повинні автоматизувати це відстежуючи зміни у CSS-файлі. При натисканні Ctrl + S файл буде збережений і мінімізований автоматично і, якщо можливо, зі спливаючою повідомленням.

У наступному уроці ми розглянемо як компілювати Sass-файли та оновлювати браузер щоразу при збереженні змін.