【问题标题】:Build and inject files only on change in gulp仅在 gulp 更改时构建和注入文件
【发布时间】:2016-09-08 12:36:25
【问题描述】:

我每次都使用 gulp-inject 和 hash-generator 来构建具有唯一名称的 javascript 文件,以避免缓存问题。在构建之前,我运行 gulp-clean 以删除以前的生成器 javascript文件。问题是,现在每次我运行 npm build 文件都在重建,即使源代码没有任何变化。我想在运行 clean 和 inject 之前检查源文件中是否发生了变化。我认为 gulp-changed 有解决方案,但不确定如何使其与哈希和清理一起使用。我的部分实现如下所示。

gulp.task('clean-scripts', function () {
// return del(['./static/js/**/*.js'])
return gulp.src(['./static/js/temp/**/*.js', './static/css/**/style-*.css'], {read: false})
.pipe(clean());
});

gulp.task('index', function () {
var target = gulp.src('./templates/base.html');
// It's not necessary to read the files (will speed up things), we're only after their paths: 
var sources = gulp.src(['./static/js/temp/**/*.js', './static/css/'+cssFileName], {read: false}, {relative : true});

return target.pipe(inject(sources))
.pipe(gulp.dest('./templates'));
});

【问题讨论】:

    标签: javascript node.js build gulp gulp-changed


    【解决方案1】:

    您可以使用 gulp-rev 或 fork gulp-revall 执行此操作。 gulp-rev documentation 非常裸露;查看gulp-revall documentation 以很好地讨论两者的作用以及它们的区别(最大的区别是gulp-rev-all 不仅检查您传递的文件中的更改,还检查它们引用的文件中的更改)。

    很难准确地说明这将如何适应您提供的 gulp 任务,但这是每个插件的通用示例:

    • gulp rev 会将/src 中的所有内容复制到/dest-rev,并在文件名后附加一个哈希(默认格式为basename-a2c4e6g8i0.ext;您可以为哈希添加前缀和/或后缀,并且可以更改扩展名)
    • gulp revall 做同样的事情,但使用/dest-revall(默认格式为basename.a2c4e6g8.ext;您可以为哈希添加前缀、转换基本名称、转换文件路径以及更改哈希长度) .

    哈希取决于文件内容:改变文件,哈希就会改变。恢复文件,哈希恢复。 (方便:假设有人访问,然后您使用新哈希推送更改的版本,然后您意识到更改是错误的,还原并推送还原的版本。如果访问者在推送之间没有刷新,他们仍然会能够依赖他们的缓存副本。)

    在 package.json 中

    "dependencies": {
      "del": "^2.2.2",
      "gulp": "^3.9.1",
      "gulp-rev": "^7.1.2",
      "gulp-rev-all": "^0.8.24"
    }
    

    gulpfile.js

    const gulp = require('gulp'),
          del = require('del'),
          rev = require('gulp-rev'),
          revAll = require('gulp-rev-all');
    
    gulp.task('rev', function() {
        del('dest-rev');
        return gulp.src('src/*')
            .pipe(rev())
            .pipe(gulp.dest('dest-rev'));
    });
    
    gulp.task('revall', function() {
        del('dest-revall');
        var rev_all = new revAll();
        gulp.src('src/*')
            .pipe(rev_all.revision())
            .pipe(gulp.dest('dest-revall'));
    });
    

    无论您使用的是gulp-rev 还是gulp-revall,您都可以(并且需要)重写已重命名的文件名 - 详情请参阅插件文档。

    请注意,我正在删除输出目录,否则会保留以前版本的文件。如果您想要保留这些以前的版本,只需摆脱 del 调用即可。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多