Стандартный мониторинг изменений файлов Gulp
Мониторинг изменений в файлах, очень удобно применять в работе, отпадает необходимость вручную запускать определенную задачу каждый раз, когда нужно зафиксировать внесенные изменения.
Рассмотрим возможность запуска автоматического мониторинга в Gulp с помощью встроенной функции. Допустим, у нас имеется именованная задача buildStyles
:
function buildStyles() {
return gulp.src('./scss/*.scss')
.pipe(debug())
.pipe(sass.sync().on('error', sass.logError))
.pipe(gulp.dest('./'));
};
exports.buildStyles = buildStyles;
Нам нужно сделать так, чтобы Gulp запускал задачу каждый раз самостоятельно, когда вносятся изменения в любой из scss-файлов. Для этого создадим еще одну именованную задачу, основная цель которой - отслеживание изменений в указанных файлах:
gulp.task("watch", () => {
// в качестве аргументов передаем два параметра, первый параметр (что и где Gulp должен отслеживать), второй параметр (что должен делать Gulp, если обнаружит изменения в указанном месте)
gulp.watch("scss/*.scss", gulp.series("buildStyles"));
});
Готовый gulpfile.js
gulpfile.js'use strict';
// gulp
const gulp = require("gulp");
// преобразоваваем scss в css
const sass = require('gulp-sass')(require('sass'));
// дебагер, будет сообщать какие файлы затронуло
const debug = require('gulp-debug');
// задача
function buildStyles() {
return gulp.src('./scss/*.scss')
.pipe(debug())
.pipe(sass.sync().on('error', sass.logError))
.pipe(gulp.dest('./'))
};
// экспорт задачи
exports.buildStyles = buildStyles;
// задача на отслеживание файлов
gulp.task("watch", () => {
// наблюдаем за стилями
gulp.watch("scss/*.scss", gulp.series("buildStyles"));
});