angularjs – 使用单页面应用程序(SPA)时如何处理过期文件而不刷

我建议使用一些构建工具，如gulp，grunt或webpack，最后一个变得越来越受欢迎。

到目前为止，我使用gulp作为我的项目。我正在移动到webpack

如果您对gulp感兴趣，您可以查看gulp-rev和gulp-rev-replace插件。

他们在做什么？

让我们说我们在你的项目app.js中有下一个文件，将gulp-rev应用到你的项目之后你得到的是像app-4j8888dp.js那样的app.js注入的html文件仍然指向app.js，所以你需要更换它。为此，您可以使用gulp-rev-replace插件。

例如。 gulp任务在哪里

var gulp = require('gulp');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var useref = require('gulp-useref');
var filter = require('gulp-filter');
var uglify = require('gulp-uglify');
var csso = require('gulp-csso');

gulp.task("index",function() {
  var jsFilter = filter("**/*.js",{ restore: true });
  var cssFilter = filter("**/*.css",{ restore: true });
  var indexHtmlFilter = filter(['**/*','!**/index.html'],{ restore: true });

  return gulp.src("src/index.html")
    .pipe(useref())      // Concatenate with gulp-useref
    .pipe(jsFilter)
    .pipe(uglify())             // Minify any javascript sources
    .pipe(jsFilter.restore)
    .pipe(cssFilter)
    .pipe(csso())               // Minify any CSS sources
    .pipe(cssFilter.restore)
    .pipe(indexHtmlFilter)
    .pipe(rev())                // Rename the concatenated files (but not index.html)
    .pipe(indexHtmlFilter.restore)
    .pipe(revReplace())         // Substitute in new filenames
    .pipe(gulp.dest('public'));
});

如果您想了解更多详情，请参阅下面的链接。

https://github.com/sindresorhus/gulp-rev
https://github.com/jamesknelson/gulp-rev-replace