Урок посвящен автоматическому отслеживанию и выполнению задач в 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.