Grunt - 如何使用grunt cache bust更新js文件中的html文件引用？ [英] Grunt - How to update html files references within js files using grunt cache bust?

问题描述

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

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

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

解决方案

我无法找到任何配置的缓存半身像，允许我在js文件中写入

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

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

1. 利用一个名为 randomstring 生成我自己的随机字符串。
   

$ npm install randomstring --save-dev

2. 设置生成的随机字符串为 options.hash 在我的 cacheBust 任务中。


3. 利用 grunt-text-replace 搜索 .js 文件/ s用于 '。html' ，并用新生成的随机字符串加上'。html'替换任何找到的实例。例如。 '.a5G5p7QdOE6DF1St4k .html'。

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



Gruntfile.js

  module.exports = function（grunt）{
 
 var randomstring =要求（ randomstring）; 
 
 grunt.initConfig（{
 
 randomString：randomstring.generate（），
 
 cacheBust：{
 myTarget：{
选项：{
 //<  - 您在这里的选项
 hash：'<％= randomString％>'//<  - 此模板引用随机生成的字符串
}，
 src：[/ * Your settings here * /] 
} 
}，
 
替换：{
 js：{
 src：'./src/**/*.js'，
 dest：'./dist/'，//<  - 创建副本
替换：[{
 from：/\.html'/，//将.html'
的所有实例匹配到：'。<％= randomString％> .html\\''//<  - 注意点在开始分隔符
}] 
} 
} 
 
}）; 
 
 require（'load-grunt-tasks'）（grunt）; 
 
 grunt.registerTask（'myCacheBust'，['cacheBust：myTarget'，'replace：js']）; 
 grunt.registerTask（'default'，['myCacheBust']）; 
 
}; 
  

注意：

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


2. 加载-grunt-tasks 也用于上面的要点：
   

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

3. 在中使用的正则表达式替换为：js 任务在 .js 文件中搜索字符 .html'的所有实例。


4. 您可以指定no。通过将值作为参数传递出现在随机生成的字符串中的字符。例如。 randomstring.generate（7）




In my js files I have references to HTML files, like window.location. I would like grunt cache bust to update that reference and add the hash data, so the loaded page is the right one, the one that uses the right versioned file. For example:

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

I can't find any configuration of the cache bust that allows me to write within the js file. In my Gruntfile.js I have added the assets and the scr files that must be written, without success.

解决方案

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

...I also couldn't get it to do that.

Finally, I opted for a custom grunt solution to achieve this. This entailed:

1. Utilizing a node package called randomstring to generate my own random string.

$ npm install randomstring --save-dev

2. Setting the random string generated as the value of options.hash in my cacheBust task.
3. Utilizing grunt-text-replace to search the .js file/s for '.html' and replacing any instances found with the newly generated random string plus '.html'. E.g. '.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']);

};

Notes:

1. Any path references in the gist above will be need to be updated according to your project directory.
2. load-grunt-tasks is also used in the gist above:

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

3. The regex used in the replace:js task searches for all instances of the characters .html' in the .js files.
4. You can specify the no. of characters that appear in the random generated string by passing the value in as an argument. E.g. randomstring.generate(7)

这篇关于Grunt - 如何使用grunt cache bust更新js文件中的html文件引用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！