如何吞咽多个文件?

I have something like this:

我有这样的东西:

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

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

});

but it does not work, because it watches two directories, the sass and the layouts directory for changes.

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

How do I make it work, so that gulp watches anything that happens inside those directories?

我如何使它工作，以便吞咽观察发生在这些目录中的任何事情?

4 个解决方案

#1

105

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

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

});

sass/**/*.scss and layouts/**/*.css will watch every directory and subdirectory for any changes to .scssand .css files that change. If you want to change that to any file make the last bit *.*

sass / * * / *。scss和布局/ * * / *。css将会查看每个目录和子目录，以便对.scssand .css文件进行任何更改。如果您想将其更改为任何文件，请创建最后的位*.*

#2

You can write a watch like this.

你可以这样写表。

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']);
});

This way you can set up as many tasks as you want via the file path of what you want to watch followed by the name of the task you created. Then you can write your default like this:

通过这种方式，您可以通过要监视的文件路径，在创建的任务的名称之后设置任意数量的任务。然后你可以这样写你的默认值:

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

If you want to simply watch for various file changes, then just watch files using glob like *.css in your task.

如果您只想监视各种文件更改，那么只需使用类似*的glob监视文件。css在你的任务。

#3

One problem that has arisen for multiple people (including me) is that adding a gulp.filter outside of the task causes gulp.watch to fail after the first pass. So if you have something like this:

很多人(包括我在内)都遇到了一个问题，那就是喝一口。在任务之外进行过滤会引起吞咽困难。第一次通过后要注意失败。如果你有这样的东西:

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

Then you need to change it to:

然后您需要将其更改为:

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

The filter has to be included in the task function. Hope that helps someone.

过滤器必须包含在任务函数中。希望可以帮助别人。

#4

@A.J Alger's answer worked for me when using Gulp v3.x.

@A。在使用Gulp v3.x时，J Alger的答案对我有效。

But starting with Gulp 4, The following appears to work for me.

但是从第4集开始，下面的内容似乎对我有用。

Notice that each task has to return a value or call "done()". The main task in this example is 'watchSrc' which in parallel calls the other tasks.

注意，每个任务必须返回一个值或调用“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()
})

#1

105

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

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

});