Gulp watch 使用缓存的配置流执行的任务

Question

我正在尝试使用 gulp 通过 gulp-bundle-assets 捆绑和缩小我的文件。运行自己做任务就好了。我的问题是使用 gulp.watch 来监视我的配置文件中的任何更改并重新捆绑我的脚本。

手表第一次执行一切正常。在连续的情况下，所有运行s，但完全相同的文件被捆绑 - 配置中的任何更改都将被忽略。

如果我运行我的 "bundle" 任务而手表运行ning，"bundle" 将使用当前配置。而连续的手表将继续使用第一次执行时的配置。

我猜 gulp.src 检索到的流的数据被缓存了。那么如何让它始终获取最新版本呢？

var gulp = require('gulp');
var bundle = require('gulp-bundle-assets');
var del = require('del');

var index = 0;
gulp.task('bundle', function () {
    console.log('Bundling files ' + (index++));
    return gulp.src('./bundle.config.js')
        .pipe(bundle())
        .pipe(gulp.dest('./bundles'));
});

gulp.task('watch', function () {
    gulp.watch(['./scripts/**/*.{js,css}', './bundle.config.js'], ['clean', 'bundle']);
});


gulp.task('clean', function (cb) {
    console.log('Cleaning files');
    del(['./bundles/**/*'], cb);
});

我尝试的另一种方法是使用 watch(...).on，然后调用 gulp.run，但这也没有解决问题。我也尝试将 bundle 任务中的代码粘贴到 on 回调中，但仍然得到相同的结果。

Answer 1

罪魁祸首不是 gulp.src()，而是 bundle()。 gulp-bundle-assets 插件使用 require() 到 load your bundle.config.js。由于 Node.js 缓存 return 来自 require() 的值，您在第一次加载文件后总是获得相同的配置对象。

解决方案是在您的 bundle 任务中使 require 缓存失效：

var gulp = require('gulp');
var bundle = require('gulp-bundle-assets');
var del = require('del');

var index = 0;
gulp.task('bundle', ['clean'], function () { // run clean task before bundle task

    // invalidate require cache for ./bundle.config.js
    delete require.cache[require.resolve('./bundle.config.js')];

    console.log('Bundling files ' + (index++));
    return gulp.src('./bundle.config.js')
      .pipe(bundle())
      .pipe(gulp.dest('./bundles'));
});

gulp.task('watch', function () {
  gulp.watch(['./scripts/**/*.{js,css}',
              './bundle.config.js'], ['bundle']); // only run bundle task
});

gulp.task('clean', function () {
    console.log('Cleaning files');
    return del(['./bundles/**/*']); // return promise object
});

与您的问题无关，但我也解决了您的 clean 任务。您的设置方式无效。

Gulp watch 使用缓存的配置流执行的任务

Gulp task executed by watch using cached config stream

watch

gulp