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 中，我添加了必须写入的资产和 scr 文件，但没有成功。

Answer 1

我找不到任何允许我在 js 文件中写入的缓存崩溃配置

...我也做不到。

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

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

$ npm install randomstring --save-dev

1. 在我的cacheBust 任务中将生成的随机字符串设置为options.hash 的值。
2. 利用grunt-text-replace 在.js 文件中搜索'.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']);

};

注意事项：

1. 以上要点中的任何路径引用都需要根据您的项目目录进行更新。
2. load-grunt-tasks 也用于上述要点：

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

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

};