Css 如何狼吞虎咽地观看多个文件？

我有这样的想法：

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

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

});

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

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

但是它不起作用，因为它监视两个目录，sass和layouts目录的变化

---

如何使它工作，以便gulp监视这些目录中发生的任何事情？

您可以编写这样的手表

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', ['css', 'browser-sync'] , function() {

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

});

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

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

如果您只想查看各种文件更改，那么只需在任务中使用glob-like

*.css

查看文件即可

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

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

});

---

sass/***/.scss

和

layouts/***.css

将监视每个目录和子目录，以查看对

.scss

和

.css

文件的任何更改。如果要将其更改为任何文件，请使用最后一位

*.

多人（包括我）遇到的一个问题是，在任务之外添加gulp.filter会导致gulp.watch在第一次通过后失败。所以如果你有这样的东西：

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

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

});

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

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

然后您需要将其更改为：

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

---

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

@A.J Alger在使用Gulp v3.x时给出的答案对我很有用

但从Gulp 4开始，以下内容似乎对我有效

请注意，每个任务都必须返回一个值或调用“done（）”。本例中的主要任务是“watchSrc”，它并行调用其他任务

gulp.task('watchHtml', function(){
    return watch('src/**/*.html', function () {
        gulp.src('src/**/*')
            .pipe(gulp.dest(BUILD_DIR))
    })

})
gulp.task('watchJS', function(){
    return watch('src/**/*.js', 'devJS')
})

gulp.task('watchCSS', function(){
    return watch(['src/**/*.css', 'src/**/*.scss'], 'buildStyles')
})


gulp.task('watchSrc', gulp.parallel('watchHtml', 'watchJS', 'watchCSS'), function(done)
{
    done()
})

---

如果将任务转换为函数

 function task1(){
   return gulp...
   ...
 }

然后，您可以使用两种有用的方法：

GULP.SERIES将同步运行任务

gulp.task('default', gulp.series(task1,task2));

gulp.task('default', gulp.parallel(task1,task2));

GULP.PARALLEL将异步运行它们

gulp.task('default', gulp.series(task1,task2));

gulp.task('default', gulp.parallel(task1,task2));

这对我很有用（吞咽4）：

---

您的gulp watch语法错误。看，这对我不起作用。只有第一块表能用。我想第二个是不活跃的。我不知道该说什么，但它对我有效。我一直在用它。你会如何在两块手表上都添加一个“变化中”的监听器？如果你把每一个gulp.task都写得很好，那么

是什么意思？@santi，对不起，我不知道3年后的具体情况。仅供参考，你自己的文件中可能不需要“gulp”前缀（我没有）