AngularJS打包添加哈希解决缓存问题求助

嘿，我太懂你这种缓存头疼的感觉了——AngularJS（1.x）的静态资源缓存确实是个老生常谈的坑，而且你说的没错，ng build -prod是Angular（2+）的构建命令，对AngularJS完全没用，这俩根本不是一套工具链！

既然你已经尝试用Gulp给文件加哈希了，那核心问题就是自动把带哈希的文件名同步到index.html里，其实有现成的Gulp插件能完美解决这个问题，不用手动改，下面给你一步步来：

用Gulp自动替换index.html的资源引用 #

我们需要用到两个插件：gulp-rev（给文件生成哈希后缀）和gulp-rev-replace（根据哈希映射替换index里的引用）

1. 安装依赖 #

先在项目里装这两个插件：

npm install gulp-rev gulp-rev-replace --save-dev

2. 配置Gulp任务 #

在你的gulpfile.js里添加以下任务：

const gulp = require('gulp');
const rev = require('gulp-rev');
const revReplace = require('gulp-rev-replace');

// 给JS文件添加哈希后缀，并生成映射清单
gulp.task('hash-js', function() {
  return gulp.src('dist/js/*.js') // 替换成你实际的JS输出路径
    .pipe(rev())
    .pipe(gulp.dest('dist/js'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev'));
});

// 给CSS文件添加哈希后缀，合并到同一个映射清单
gulp.task('hash-css', function() {
  return gulp.src('dist/css/*.css') // 替换成你实际的CSS输出路径
    .pipe(rev())
    .pipe(gulp.dest('dist/css'))
    .pipe(rev.manifest({merge: true})) // 合并JS的映射文件
    .pipe(gulp.dest('dist/rev'));
});

// 替换index.html里的旧资源引用为带哈希的新路径
gulp.task('update-index', ['hash-js', 'hash-css'], function() {
  const manifest = gulp.src('dist/rev/rev-manifest.json');
  
  return gulp.src('src/index.html') // 你的源index文件路径
    .pipe(revReplace({manifest: manifest}))
    .pipe(gulp.dest('dist')); // 输出到打包后的目录
});

// 把所有任务串成一个构建命令
gulp.task('build', ['update-index']);

3. 运行构建 #

执行gulp build之后，你会发现：

• dist/js和dist/css里的文件变成了app-d41d8cd98f.js、main-b0f579c781.css这种带哈希的名字
• dist/rev里生成了rev-manifest.json，记录了原文件名和哈希文件名的映射
• dist/index.html里的<script src="js/app.js"></script>会自动变成<script src="js/app-d41d8cd98f.js"></script>，完全不用手动改！

额外的简便方案（不用构建工具） #

如果你的项目很小，不想折腾Gulp插件，也可以用版本号参数的方式临时救急：
在index.html的资源引用后面加版本号，比如：

<script src="app.js?v=1.0.1"></script>
<link rel="stylesheet" href="main.css?v=1.0.1">

每次更新代码后，手动把版本号改一下（比如从1.0.1改成1.0.2），这样浏览器会认为是新资源，就不会用缓存了。不过这个方法适合小项目，大项目还是用哈希自动替换更靠谱。

补充说明 #

为什么ng build -prod没用？因为那是Angular（2及以上版本）的CLI命令，AngularJS（1.x）没有官方的CLI工具，得用Gulp、Grunt或者Webpack这类第三方构建工具来处理资源打包和哈希。

内容的提问来源于stack exchange，提问作者Leon van der Veen