javascript - 在 `bundle.js` 创建 `cachebust.resources()` 之后如何从 html 引用 `bundle.a3503174.js` ？

Question

链接为https://github.com/jhades/angularjs-gulp-example/blob/master/gulpfile.js似乎生成了一个名为 bundle.a3503174.js 的包文件，但是，它在 html 中被引用为 bundle.js。这是如何运作的？尽管名称已使用 md5 校验和编号扩展，系统如何知道在哪里查看正确的捆绑文件？

Answer 1

问题中的链接实际上使用gulp-cachebust来创建 bundle ，然后将index.html中对该 bundle 的引用重写为适当的文件名。关键在于以下代码行中的 cachebust.references() 语句。

gulp.task('build', [ 'clean', 'bower','build-css','build-template-cache', 'jshint', 'build-js'], function() {
    return gulp.src('index.html')
        .pipe(cachebust.references())
        .pipe(gulp.dest('dist')); });

因此，尽管index.html的非gulp版本中的引用链接是/dist/js/bundle.js。该引用在index.html的gulp版本中被重写为js/bundle.a3503174.js。