如何查看多个文件？

73

我有这样的事情：

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

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

});

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

我如何使其工作，以便gulp监视这些目录中发生的所有事件？

css gulp gulp-watch

— 爱情和幸福
source

您的gulp watch语法错误。见github.com/gulpjs/gulp/blob/master/docs/…–

— Heikki

127

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

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

});

sass/**/*.scss并且layouts/**/*.css会看每个目录和子目录中的任何变化.scss和.css文件的变化。如果要将其更改为任何文件，请最后一位*.*

— 凯莉·安德鲁斯（Kelly J Andrews）
source

61

您可以编写这样的手表。

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监视文件。

— 阿尔杰
source

10

它对我不起作用。只有第一只手表有效。我猜第二个不活跃。

— blablabla 2015年

1

我不知道该说些什么，但是对我有用。我用它所有的时间。

— AJ Alger 2015年

您如何为这两块手表添加“ on change”监听器？

— zok 2015年

1

你是什么意思If you have each gulp.task written properly？

— 彼得

1

@santi，很抱歉，但三年后我不知道具体情况了。

— blablabla

10

对于多个人（包括我）而言，出现的一个问题是，在任务外部添加gulp.filter会导致gulp.watch在第一次通过后失败。因此，如果您有这样的事情：

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

然后，您需要将其更改为：

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

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

— 天琴座
source

9

这对我有用（Gulp 4）：

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

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

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

— 津津
source

仅供参考，您可能不需要在自己的文件中使用“ gulp”前缀（我没有）

— Jono

2

使用Gulp v3.x时，@ AJ Alger的答案对我有用。

但是从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()
})

— 用户名
source

-1

如果您将任务转换为函数

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

您可以使用2种有用的方法：

GULP.SERIES将同步运行任务

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

GULP.PARALLEL将异步运行它们

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

— 亚历山德罗·卡塔尼亚（Alessandro Catania）
source