Gulp.JS: Автоматизация задач с watch и одновременным запуском

Урок посвящен автоматическому отслеживанию и выполнению задач в Gulp. Рассмотрим создание задач, запускаемых при изменении файлов.

Вызов нескольких задач одновременно

Создадим задачу print, выводящую сообщение в консоль:

gulp.task('print', function() {
  console.log('Hi!');
});

Для одновременного запуска нескольких задач создадим задачу по умолчанию:

gulp.task('default', gulp.series('css-style', 'print'));

Команда gulp запустит сначала css-style, затем print. Порядок задач определяется в gulp.series. Можно указывать любое количество задач через запятую.

Создание Watch-задач для постоянного отслеживания

Для автоматического запуска задач при изменении файлов используем gulp.watch. Создадим watch-задачу:

gulp.task('watch', function() {
  gulp.watch('./css/**/*.css', gulp.series('css-style'));
});

Эта задача отслеживает изменения в файлах CSS в папке css и запускает css-style при каждом изменении. ** означает «любая вложенная папка», * — «любой файл».

Более универсальный вариант, отслеживающий все файлы с расширением .css: (Этот пример дублирует предыдущий и удален)

Для запуска watch-задачи выполните команду:

gulp watch

Gulp будет постоянно отслеживать изменения файлов. Для выхода из режима отслеживания нажмите Ctrl + C.

Можно создавать несколько watch-задач для отслеживания разных файлов и запуска разных задач. Например:

gulp.task('watch', gulp.parallel('watchCss', 'watchJs'));

gulp.task('watchCss', function() {
  gulp.watch('./css/**/*.css', gulp.series('css-style'));
});

gulp.task('watchJs', function() {
  gulp.watch('./js/**/*.js', gulp.series('js-task')); // Предполагается наличие задачи 'js-task'
});

Здесь gulp.parallel запускает две watch-задачи одновременно.

gulp.watch автоматизирует процесс разработки, автоматически перестраивая проект при изменении файлов. Можно создавать любое количество watch-задач для отслеживания разных файлов и запуска разных задач Gulp. Для выхода из режима watch используйте Ctrl + C.

Что будем искать? Например,программа