Поєднання Gulp завдань

Давайте підіб'ємо підсумки виконаної роботи. На даний момент ми створили два різні набори gulp-задач.

Перший набір призначений для процесу розробки, у цьому наборі ми компілювали Sass у CSS, відстежували зміни та перезавантажували браузер.

Другий набір призначений для процесу оптимізації, у цьому наборі готуємо усі файли для робочого веб-сайту. У цьому процесі ми оптимізували такі ресурси, як CSS, JavaScript та зображення, а також копіювали шрифти з папки app до dist.

Ми вже групували перший набір завдань у простий робочий процес за допомогою команди gulp watch:

<code data-language="javascript">gulp.task('watch' , ['browserSync', 'sass'], function (){ //…відстеження })

Другий набір складається із завдань, які потрібно виконати для створення робочого веб-сайту. Цей набір включає завдання clean:dist, sass, useref, images та fonts.

Якби ми пішли подібним шляхом, то створили б завдання build, яка б об'єднала всі завдання разом.

<code data-language="javascript">gulp.task('build', ['clean', 'sass', 'useref', 'images', 'fonts'], function (){ console.log(' Побудова файлів…'); Існує ймовірність того, що завдання <code>useref</code>, <code>images</code> або навіть <code>fonts</code> завершаться раніше завдання clean, в такому випадку видаліться вся папка <em>dist</em>.</p>
<p>Отже, для гарантії того, що очищення завершиться до виконання інших завдань, нам потрібно використовувати додатковий плагін під назвою <a href="https://www.npmjs.com/package/run-sequence" rel="nofollow">Run Sequence</a>.</p> <pre>$ npm install run-sequence--save-dev

Ось синтаксис виконання послідовності завдань:

<code data-language="javascript">var runSequence=require('run-sequence'); gulp.task('ім'я-завдання', function(callback) { runSequence('завдання-один', 'завдання-два', 'завдання-три', callback); });

<Коли викликається «ім'я-завдання», Gulp спочатку запускає «завдання-один». Коли це завдання завершується, Gulp автоматично запускає "завдання-два". Нарешті, коли «завдання-два» виконано, Gulp запускає «завдання-три».

Run Sequence також дозволяє запускати завдання одночасно, якщо помістити їх у масив:

<code data-language="javascript">gulp.task('task-name', function(callback) { runSequence('завдання-один', ['завдання-два','виконується','паралельно') ], 'завдання-три', callback);});

У даному випадку Gulp спочатку запускає «завдання-один». Коли це завдання завершено, Gulp одночасно запускає кожне завдання у другому аргументі. Всі завдання в цьому другому аргументі повинні бути виконані до запуску «задача-три». Тепер ми можемо створити завдання, яке гарантує, що спочатку запуститься clean: dist, а потім все інші завдання:

<code data-language="javascript">gulp.task('build', function (callback) { runSequence('clean:dist', [' sass', 'useref', 'images', 'fonts'], callback) })

Будемо послідовні і проробимо те саме з першою групою. На цей раз в якості імені завдання вкажемо default:

<code data-language="javascript">gulp.task('default', function (callback) { runSequence(['sass','browserSync', 'watch'], callback) })

Чому default? Тому що, коли у вас є завдання з таким ім'ям, його можна виконати, просто набравши команду gulp.

І, нарешті, ось репозиторій GitHub для всієї роботи, яку ми проробили!