73

我有这样的事情：

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

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

});

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

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

4

7 回答 7

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

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

});

sass/**/*.scss并将layouts/**/*.css监视每个目录和子目录的任何更改.scss和更改的.css文件。如果您想将其更改为任何文件，请在最后一位*.*

于 2014-12-26T16:30:45.680 回答
62

你可以像这样写一个手表。

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

如果您只想监视各种文件更改，那么只需使用 glob 监视文件，就像*.css在您的任务中一样。

于 2014-12-25T15:41:58.020 回答
10

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

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

然后您需要将其更改为：

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

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

于 2015-04-14T01:56:44.010 回答
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)
于 2018-11-09T17:05:05.927 回答
2

@AJ 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()
})
于 2018-04-03T16:59:15.243 回答
0

从 gulp 4 开始，有两种可能性：

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);
于 2021-07-27T15:43:45.353 回答
-1

如果您将任务转换为函数

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

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

GULP.SERIES 将同步运行任务

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

GULP.PARALLEL 将异步运行它们

gulp.task('default', gulp.parallel(task1,task2));
于 2018-11-02T16:04:24.337 回答