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

Question

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

window.location = 'myweb.html'; > window.location = 'myweb.html?575a2aa1158af941?575a2aa9658af941';

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

Answer 1

I can't find any configuration of the cache bust that allows me to write within the js file

...我也做不到。

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

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

$ npm install randomstring --save-dev

在我的cacheBust任务中将生成的随机字符串设置为options.hash的值。
利用 grunt-text-replace 在 .js file/s 中搜索 '。html' 并用新生成的随机字符串加上 '.html' 替换找到的任何实例。例如。 '.a5G5p7QdOE6DF1St4k.html'.

$ 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 任务中使用的正则表达式在 .js 文件中搜索字符 .html' 的所有实例。
您可以指定编号。通过将值作为参数传递出现在随机生成的字符串中的字符数。例如。 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 文件引用？

Grunt - How to update html files references within js files using grunt cache bust?

javascript

caching

node.js

gruntjs

Gruntfile.js