Question

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

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

如果我运行我的＆＃34;捆绑＆＃34;手表运行时的任务，＆＃34;捆绑＆＃34;将使用当前配置。连续手表将在第一次执行时继续使用配置。

我的猜测是缓存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缓存来自require()的返回值，因此在首次加载文件后，您始终会获得相同的配置对象。

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

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任务。你设置它的方式不起作用。

使用缓存配置流

1 个答案: