如何Gulp-Watch多个文件？

Question

我有这样的事情:

gulp.task('default', ['css', 'browser-sync'] , function() {

    gulp.watch(['sass/**/*.scss', 'layouts/*.css'], function() {
        gulp.run('css');
    });

});

但它不起作用,因为它监视两个目录,sass和layouts目录进行更改.

如何让它工作,以便gulp监视那些目录中发生的任何事情？

Answer 1

gulp.task('default', ['css', 'browser-sync'] , function() {

    gulp.watch(['sass/**/*.scss', 'layouts/**/*.css'], ['css']);

});

sass/**/*.scss并且layouts/**/*.css会看每个目录和子目录中的任何变化.scss和.css这种变化的文件.如果你想把它改成任何文件,最后一点*.*

Answer 2

你可以写一个这样的手表.

gulp.task('watch', function() {
    gulp.watch('path/to/file', ['gulp task name for css/scss']);
    gulp.watch('path/to/file', ['gulp task name for js']);
});

这样,您可以根据要查看的内容的文件路径设置任意数量的任务,然后创建您创建的任务的名称.然后你可以写这样的默认值:

gulp.task('default', ['gulp task name for css/scss', 'gulp task name for js']);

如果您只想查看各种文件更改,那么只需*.css在任务中使用glob来查看文件.

Answer 3

多人(包括我)出现的一个问题是在任务之外添加gulp.filter会导致gulp.watch在第一次通过后失败.所以,如果你有这样的事情:

var filter = gulpFilter(['fileToExclude.js'])
gulp.task('newTask', function(){ ...

然后你需要将其更改为:

gulp.task('newTask', function(){
  var filter = gulpFilter(['fileToExclude.js'])

过滤器必须包含在任务功能中.希望能帮助别人.

Answer 4

这对我有用（Gulp 4）：

function watchSass() {
  return gulp.watch(sassGlob, { ignoreInitial: false }, buildCss)
}

function watchImages() {
  return gulp.watch(imagesGlob, copyImages)
}

exports.watch = gulp.parallel(watchSass, watchImages)