У цій частині ми розкриємо третій розділ gulpfile.js, який дозволить стежити за нашими файлами та запускати завдання при збереженні. Також, крім завдання мінімізації CSS, ми збираємося додати можливість компілювати Sass-файл замість застосування вихідного CSS, а потім відобразити повідомлення після успішного завершення.
Ви повинні знати, як вся ця робота або завдання відповідають пакетам Gulp, які нам потрібно завантажити в проект.
Для початку, ось моя поточна структура папок:
- Build/
- index.html
- package .json
- gulpfile.js
- node_modules/
- gulp/
- gulp-minify-css/
- main.css
Установка необхідних пакетів
Перейдіть до папки проекту і виконайте такі команди по одній, щоб встановити необхідні пакети:
<code>npm install--save-dev gulp-notify npm install--save-dev gulp-sass
Додавання завдання watch і автоматизація системи
Gulp пропонує об'єкт з ім'ям watch, який схожий на об'єкти src та dest. Ми можемо використовувати об'єкт watch і попросити Gulp слідкувати за цим завданням. Це означає, що Gulp буде стежити за файлом на випадок його модифікації.="javascript">gulp.watch('main.css', function(){ console.log('seen'); });
Остаточно gulpfile.js має виглядати так :
<code data-language="javascript">var gulp=require('gulp'); var minifyCss=require('gulp-minify-css'); gulp.task('mincss', function(){ return gulp.src('main.css') .pipe(minifyCss()) .pipe(gulp.dest('main')); }); gulp.watch('main.css', function(){ console.log('seen'); });Тепер перейдіть до командного рядка і запустіть gulp mincss знову. Якщо все відбулося очікувано, то ви повинні побачити повідомлення «seen», як на малюнку нижче:
Об'єкт watch, як і раніше, стежитиме за будь-якими змінами зробленими у файлі main.css і відображатиме «seen» щоразу, поки ви не натиснете Ctrl + C для його зупинки. Круто!
Функція watch приймає два аргументи: файл(и) для стеження та виклик для дії. Другий аргумент може бути замиканням (анонімною функцією) або об'єктом JavaScript. Зверніть увагу, що за раз ми можемо додати кілька завдань у файл gulpfile.js. У нас може бути завдання script для керування JavaScript-файлами, завдання connectPHP для запуску сервера PHP і т.д. Це може ускладнити керування відстеженням. Допустимо, у нас є три файли для стеження, ми повинні написати:
<code data-language="javascript">gulp.watch(['file1.css', 'file2.txt', 'file3 .js'], function(){ console.log('seen'); });Це чудово буде працювати, але в мене особисто є дві основні проблеми з такою практикою. По-перше, це виглядає брудно. Я маю писати повне ім'я файлу. По-друге, відображається одне повідомлення («seen») кожного разу, коли змінюється будь-який файл, тоді як я хотів би знати, коли змінювався конкретний файл. об'єкта paths, на кшталт наступного:
<code data-language="javascript">var paths={ css:['path/to/style1.css ', 'path/to/style2.css'], script:['path/to/script1.js', 'path/to/script2.js'] }; gulp.watch(paths.css, function(){ console.log('seen css changes'); }); gulp.watch(paths.script, function(){ console.log('seen javascript changes'); });Це виглядає добре і дає нам можливість дізнатися, коли змінився CSS або JavaScript.
Іншою потужною штукою для повідомлень є другий аргумент. Оскільки ми можемо використовувати замикання як аргумент, уявіть, як ми передаємо ціле завдання. Отже, у нас є щось подібне:
<code data-language="javascript">gulp.watch(paths.css, ['mincss']);
Ви погодитеся зі мною, що це виглядає чистіше. Тепер, з усіма цими невеликими змінами, давайте застосуємо їх до Gulp-файлу і подивимося, як це виглядає загалом:
<code data-language="javascript">var gulp=require('gulp') ; var minifyCss=require('gulp-minify-css'); var paths={ css:['main.css'], text:['test.txt'] }; gulp.task('mincss', function(){ return gulp.src('main.css') .pipe(minifyCss()) .pipe(gulp.dest('main')); }); gulp.watch(paths.css, ['mincss']);Поки це все чудово, але уявіть, що у нас є кілька завдань для відстеження. Як ми запустимо їх із командного рядка? Допустимо, наступний випадок:
<code data-language="javascript">var gulp=require('gulp'); var minifyCss=require('gulp-minify-css'); var coffee=require('gulp-coffee'); var paths={ css:['main.css'], script:['script.coffee'] }; gulp.task('mincss', function(){ return gulp.src('main.css') .pipe(minifyCss()) .pipe(gulp.dest('main')); }); gulp.task('scripts', function(){ return gulp.src(paths.script) .pipe(coffee()) .pipe(gulp.dest('js')); }); gulp.watch(paths.css, ['mincss']); gulp.watch(paths.script, ['scripts']);Під час запуску gulp mincss будуть відстежуватися файли CSS та CoffeeScript. Але при зміні файлу CoffeeScript він не буде відстежуватися, тільки файл CSS. У тому сенсі, що відстеження відбудеться лише, коли ви зміните свій CSS-файл. Те саме відбувається, коли ви вирішите відстежувати завдання scripts. Хоча це може бути іноді корисно з точки зору економії ресурсів.
Для зменшення проблеми ми повинні зібрати всі завдання в одну, яка викликається один раз і відстежує всі наші завдання одночасно:
<code data-language="javascript">var gulp=require('gulp'); var minifyCss=require('gulp-minify-css'); var coffee=require('gulp-coffee'); var paths={ css:['main.css'], script:['script.coffee'] }; gulp.task('mincss', function(){ return gulp.src('main.css') .pipe(minifyCss()) .pipe(gulp.dest('main')); }); gulp.task('scripts', function(){ return gulp.src(paths.script) .pipe(coffee()) .pipe(gulp.dest('js')); }); gulp.task('watcher',function(){ gulp.watch(paths.css, ['mincss']); gulp.watch(paths.script, ['scripts']); });Тепер все, що вам потрібно зробити це запустити gulp watcher і всі ваші файли будуть відстежуватися одночасно. Будь-який файл, який ви зміните, буде компільовано.
Існує ще один спосіб, як зробити все простіше. Замість запуску gulp watcher ви можете просто запустити gulp, і він зробить всю роботу. Але прямо зараз у нашому випадку якщо ви введете gulp ви отримаєте таку помилку:
<code>[11:08:34] Task 'default' is not in your gulpfile [11:08:34] the documentation for proper gulpfile formatting
Gulp просить нас створити ще одне завдання з ім'ям default, яке необхідне для роботи.
Отже, що щодо завдання default? Це завдання бере всі завдання для запуску в єдиний об'єкт, включаючи наше завдання watcher. Тепер ми можемо змінити gulpfile.js на це:
<code data-language="javascript">var gulp=require('gulp'); var minifyCss=require('gulp-minify-css'); var coffee=require('gulp-coffee'); var paths={ css:['main.css'], script:['script.coffee'] }; gulp.task('mincss', function(){ return gulp.src('main.css') .pipe(minifyCss()) .pipe(gulp.dest('main')); }); gulp.task('scripts', function(){ return gulp.src(paths.script) .pipe(coffee()) .pipe(gulp.dest('js')); }); gulp.task('watcher',function(){ gulp.watch(paths.css, ['mincss']); gulp.watch(paths.script, ['scripts']); }); gulp.task('default', ['watcher', 'mincss', 'scripts']);