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

我有这样的东西:

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


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


});

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

我如何让它工作，使吞咽观察发生在这些目录内的任何事情？

76366 次浏览
小开

你可以写这样的表。

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

如果您只想监视各种文件更改，那么只需在任务中使用 globb (如 *.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 在第一次通过之后失败。所以如果你有这样的东西:

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

然后你需要把它改成:

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

过滤器必须包含在任务函数中。希望对某些人有所帮助。

小开

@ A. J. Alger 的回答在我使用 Gulp v3.x 的时候起作用了。

但是从第四杯开始，下面这些看起来对我很有用。

注意，每个任务都必须返回一个值或调用“ done ()”。这个例子中的主要任务是“ watch Src”，它并行地调用其他任务。

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...
...
}

你可以使用以下两种有用的方法:

SERIES 将同步运行这些任务

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

PARALLEL 将异步运行它们

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

这对我有用(咕噜4) :

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


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


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

至于第四阶段，这是另一种选择:

const { watch, series, parallel } = require('gulp');


function watchTask(cb) {
// this will execute all task on any changes
watch(['src/**/*'],
series(parallel(jsTask, htmlTask, assetTask),
));
// this will run specific task based on file type or folder
watch(['src/**/*.js'], series(jsTask));
watch(['src/**/*.html'], series(htmlTask));
watch(['assets/**/*'], series(assetTask));
}


exports.default = series(parallel(jsTask, htmlTask, assetTask), watchTask);

提交答案