Запуск задач Gulp последовательно: coffee после clean

Быстрый ответ

Функция series() в Gulp 4 предоставляет возможность последовательного исполнения задач. Разместите задачи внутри series(), чтобы установить точный порядок их выполнения.

Пример использования:

const { series } = require('gulp');

function clean(done) {
  // строчка кода, которая "очищает" ваш проект;
  done();
}

function build(done) {
  // этап сборки проекта, не такой простой, как конструктор LEGO;
  done();
}

exports.build = series(clean, build);

Вызов series(clean, build) гарантирует, что задача clean будет выполнена до начала build.

Если вы используете версию Gulp < 4, можно воспользоваться модулем "run-sequence":

npm install --save-dev run-sequence

Добавьте его в gulpfile.js:

var runSequence = require('run-sequence');

gulp.task('default', function(callback) {
  runSequence('task1', 'task2', 'task3', callback);
});

Завершение

Важно, чтобы каждая задача отмечала о своем завершении, возвращая поток, промис или приемом колбэка.

// Завершение с возвратом потока
gulp.task('styles', function() {
  return gulp.src('styles/**/*.css')
    .pipe(gulp.dest('dist/styles'));
});

// Завершение с промисом
gulp.task('scripts', function() {
  return new Promise(resolve => {
    // Ну кто ж промисы нарушает!
    resolve();
  });
});

Завершение при помощи колбэка:

gulp.task('clean', function(done) {
  // Пора для генеральной уборки в коде!
  done();
});

Обработка ошибок: невоспеваемый герой

Ваш процесс может столкнуться с ошибками. Будьте к этому готовы:

gulp.task('lint', function() {
  return gulp.src('scripts/**/*.js')
    .pipe(plugin1())
    .on('error', handleErrors)
    .pipe(gulp.dest('output'));
});

Чтобы обработать ошибки, создайте функцию handleErrors, которая позволит вам грациозно управлять возникающими сложностями.

Оптимизация рабочего процесса: метод Gulp

Используйте series() для последовательного и parallel() для параллельного выполнения задач.

const { parallel, series } = require('gulp');

// Сначала 'clean', затем 'styles' и 'scripts' параллельно
exports.build = series(clean, parallel(styles, scripts));

Визуализация: как в расписании поездов!

Думайте о задачах как о вагонах, идущих друг за другом:

Задача 1 (🚂) --> Задача 2 (🚃) --> Задача 3 (🚃)

Последовательное выполнение: это как стояние в очереди за вкусным тортом без хаоса и толкотни.

Модульная организация задач: разделяй и властвуй

Воспользуйтесь генераторами Yeoman и плагинами для упрощения рабочего процесса и избегания колесообретательства.

npm install -g yo
npm install -g generator-gulp-webapp
yo gulp-webapp

Таким образом, вы сможете настроить задачи так быстро, как греется пицца в микроволновке.

Управление зависимостями задач: избегание эффекта домино

Когда задачи ваших проектов перекликаются между собой, определите зависимости для правильной последовательности их выполнения:

gulp.task('pre-build', gulp.series('clean', 'lint'));
gulp.task('build', gulp.series('pre-build', 'compile'));

Таким образом, 'clean' и 'lint' завершатся перед 'compile', обеспечивая чистоту вашего кода.

Что дальше: Будущее с Gulp

Следите за документацией Gulp, чтобы не пропустить важные обновления.

Перегружать обработчики событий? Нет, спасибо!

Обработчики событий используются для создания интерактивных задач, но отключайте ненужные, чтобы избежать утечек памяти.

gulp.task('watch', function() {
  let watcher = gulp.watch('scripts/**/*.js', gulp.series('build'));
  watcher.on('change', function(path, stats) {
    console.log(`Файл ${path} был изменён. Следите за руками: наблюдатель не спит!`);
  });

  // Когда наблюдатель вам больше не нужен — отключите его.
  watcher.close();
});

Полезные материалы

1. Создание задач | gulp.js — официальное руководство по определению и запуску задач в Gulp.
2. javascript – Как выполнить задачи в Gulp последовательно – Stack Overflow — обсуждение последовательного выполнения задач в Gulp на Stack Overflow.
3. Использование промисов в JavaScript – JavaScript | MDN — подробная статья о работе промисов в JavaScript для асинхронного управления задачами.
4. Gulp для новичков | CSS-Tricks — доступное руководство, обучающее основам работы с Gulp, включая последовательный запуск задач.
5. Как модульно организовать HTML с помощью шаблонизаторов и Gulp | Zell Liew — полезные примеры использования Gulp для структурирования HTML, применимые при организации сложных задач.