Question

在我的js文件中，我引用了HTML文件，比如window.location。我希望grunt cache bust更新该引用并添加哈希数据，因此加载的页面是正确的，即使用正确版本化文件的页面。例如：

window.location ='myweb.html'; ＆GT; window.location ='myweb.html？575a2aa1158af941？575a2aa9658af941';

我找不到任何允许我在js文件中写入的缓存区域配置。在我的Gruntfile.js中，我添加了必须写入的资产和scr文件，但没有成功。

Answer 1

我无法找到允许我在js文件中写入的缓存区域的任何配置

......我也无法做到这一点。

最后，我选择了一个自定义的grunt解决方案来实现这一目标。这需要：

使用名为randomstring的节点包生成我自己的随机字符串。

$ npm install randomstring --save-dev

在我的options.hash任务中设置生成为cacheBust值的随机字符串。
利用grunt-text-replace在.js文件中搜索 ＆＃39; .html＆＃39; 并替换找到的所有实例新生成的随机字符串加上＆＃39; .html＆＃39; 。例如。的 ＆＃39; .a5G5p7QdOE6DF1St4k 的.html＆＃39;

$ npm install grunt-text-replace --save-dev

Gruntfile.js

module.exports = function(grunt) { var randomstring = require("randomstring"); grunt.initConfig({ randomString: randomstring.generate(), cacheBust: { myTarget: { options: { // <-- Your options here hash: '<%= randomString %>' //<-- This template references the random generated string. }, src: [/* Your settings here */] } }, replace: { js: { src: './src/**/*.js', dest: './dist/', //<-- creates a copy replacements: [{ from: /\.html'/, // matches all instances of .html' to: '.<%= randomString %>.html\'' //<-- Note the dot separator at the start. }] } } }); require('load-grunt-tasks')(grunt); grunt.registerTask('myCacheBust', ['cacheBust:myTarget', 'replace:js']); grunt.registerTask('default', ['myCacheBust']); };

备注：

上述要点中的任何路径引用都需要根据您的项目目录进行更新。

load-grunt-tasks也用在上面的要点中：

$ npm install load-grunt-tasks --save-dev

replace:js任务中使用的正则表达式搜索.html'文件中所有字符.js的实例。

您可以指定编号。通过将值作为参数传递而在随机生成的字符串中出现的字符数。例如。 randomstring.generate(7)

Answer 2

我参与了一个项目，该项目使用Grunt缓存清理来破坏JS文件中的文件名。配置看起来像这样

cacheBust : {
    revProd: {
        options: {
            assets: ['**/*.js', '!assets/js/config.constant.js','**/*.css','!assets/css/themes/*.css'],
            baseDir: 'standardversion',
            deleteOriginals: true,
            jsonOutput: true, // Output the original => new URLs to a JSON file
            jsonOutputFilename: 'grunt-cache-bust.json'
        },
        src: ['standardversion/index.html', 'standardversion/assets/js/config.contants.js']
}

我的config.contants.js文件包含

之类的路径

'propertiesCtrl': 'assets/views/properties/controllers/properties.controller.js',
'propertyDetailsCtrl': 'assets/views/properties/controllers/propertyDetails.controller.js',
'propertyAddCtrl': 'assets/views/properties/controllers/addProperty.controller.js',

您可以通过将**/*.html添加到assets选项

来破坏HTML

Answer 3

我也遇到过类似的情况，我改编了RobC的上面的代码来解决。

为了避免在部署时出现缓存问题，我在html参考之后添加了一个哈希。这样，您可以强制浏览器在部署后加载文件，但是此后，就可以毫无问题地缓存文件。

这是我的代码。

module.exports = function(grunt) {

    var randomstring = require("randomstring");

    grunt.initConfig({

        randomString: randomstring.generate(),

        replace: {
            js: {
                src: './src/**/*.js',
                dest: './dist/', //<-- creates a copy
                replacements: [{
                    from: '.js', // use string or regex to find the files you want
                    to: function (matchedWord) {
                        return matchedWord + '?<%= randomString %>';
                    }
                }]
            }
        }

    });

    require('load-grunt-tasks')(grunt);

    grunt.registerTask('default', ['replace:js']);

};

Grunt - 如何使用grunt cache bust更新js文件中的html文件引用？

3 个答案:

Gruntfile.js