CSS 如何吞咽多个文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27645103/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Gulp-Watch Multiple files?
提问by LoveAndHappiness
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?
我如何使它工作，以便 gulp 监视这些目录中发生的任何事情？
回答by Kelly J Andrews
gulp.task('default', ['css', 'browser-sync'] , function() {
gulp.watch(['sass/**/*.scss', 'layouts/**/*.css'], ['css']);
});
sass/**/*.scssand layouts/**/*.csswill watch every directory and subdirectory for any changes to .scssand .cssfiles that change. If you want to change that to anyfile make the last bit *.*
sass/**/*.scss并且layouts/**/*.css会看每个目录和子目录中的任何变化.scss和.css文件的变化。如果要将其更改为任何文件，请执行最后一点*.*
回答by A. J. Alger
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 *.cssin your task.
如果您只想查看各种文件更改，那么只需*.css在您的任务中使用 glob 来查看文件。
回答by Lyra
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:
多人（包括我）出现的一个问题是，在任务之外添加 gulp.filter 会导致 gulp.watch 在第一次通过后失败。所以如果你有这样的事情：
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.
过滤器必须包含在任务函数中。希望能帮助某人。
回答by Chintsu
This works for me (Gulp 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)
回答by user6123723
@A.J Alger's answer worked for me when using Gulp v3.x.
使用 Gulp v3.x 时，@AJ Alger 的回答对我有用。
But starting with Gulp 4, The following appears to work for me.
但是从 Gulp 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()
})
回答by Alessandro Catania
If you convert your tasks into functions
如果您将任务转换为函数
function task1(){
return gulp...
...
}
There are then 2 useful methods you can use:
您可以使用两种有用的方法：
GULP.SERIES will run the tasks synchronously
GULP.SERIES 将同步运行任务
gulp.task('default', gulp.series(task1,task2));
GULP.PARALLEL will run them asynchronously
GULP.PARALLEL 将异步运行它们
gulp.task('default', gulp.parallel(task1,task2));
