使用grunt为多个js文件进行Cachebusting [英] Cachebusting using grunt for multiple js files

问题描述

有几个关于grunt / cachebusting的问题，但是我没有找到足够接近我所寻找的东西的地方。因此，一个新的问题。

这是我正在寻找的。我的Backbone / Marionette应用程序的JS文件被组织到模块级文件夹中。

| - app

  |  - 模块
 |  - 模块1 
 |  - 脚本
 |  - 模型
 |  - 视图
 |  - 模板
 |  - 模块
 |  - 脚本
 |  - 模型
 |  - 视图
 |  - 模板
 |  -  index.html 
 |  - 脚本
 | -  app.js 
 |  -  styles 
  

我需要的是一种连接/缩小/ uglify所有的module1到它自己的单个文件（比如module1.min.js）。然后，应该对该文件进行版本控制，并在其他JS文件（在其他模块中）对module1的引用进行相应更新。这样，只有在从客户端调用相应功能的同时，我才能将模块下载到客户端，同时仍然可以获得缓存和缓存清除的好处。如果我要将整个应用程序的所有js文件连接到一个文件中，这有助于避免昂贵的下载。

有没有解决方案？

我在这个线程中喜欢开发者JBCP的回答 -

我使用grunt进行构建，因此，我查看了grunt任务 - concat，usemin，rev。我在应用程序中使用requireJS。但我找不到解决方案来更新从其他模块js文件中module1的引用，我卡住了。寻找这个问题的解决方案或者用于构建模块级别min.js文件以及cachebusting的替代方法。

非常感谢任何帮助。

感谢，
DJ

解决方案

要连接，使用grunt-contrib-concat 。

要缩小和uglify JavaScript文件，请使用grunt-contrib-uglify。

要缓存胸围：使用grunt-cache-busting - 使用文件的md5散列重命名html中的文件和引用。

$ b $ 2如果您想将自定义字符串追加到文件名中，您可以使用grunt-文本替换或grunt-cache-breaker重命名html文件中的引用。

可以使用grunt-contrib-copy来重命名文件名称。

例如：

$ p $ module.exports = function（ grunt）{
var timeStamp;

//项目配置。
grunt.initConfig（{
copy：{
rename：{
files：[
{
expand：true，
dot：true ，
cwd：'js /'，
dest：'dist / js /'，
src：[
'*。*'
]，
重命名：函数（dest，src）{
return dest + src.replace（'。js'，'。'+ timeStamp +'.js'）;
}
}

$ b $，b $ b替换：{

bust：{
src：['dist / *。html']，
overwrite：true，//覆盖匹配的源文件
替换：[
{
from：'.js'，

to：function（）{
timeStamp = new Date（）。getTime（）;
return'。'+ timeStamp +'.js';
}
}
]
}
}
}）;
grunt.loadNpmTasks（'grunt-contrib-copy'）;
grunt.loadNpmTasks（'grunt-text-replace'）;


删除原始文件 - 使用grunt-contrib-clean。您可能需要使用其他复制任务。

仅供参考：我的默认任务。
grunt.registerTask（'default'，['clean'，'copy：dist'，'replace'，'copy：rename'，'clean：old'，'copy：after'，'clean：after'after' ]）;

There are several questions on SO for grunt / cachebusting but I didn't find anything close enough to what I'm looking for. Hence, a new question..

Here is what I'm looking for. My Backbone/Marionette app's JS files are organized into module level folders.

|- app

|- modules
   |- module1
     |- scripts
        |- models
        |- views
        |- templates
   |- module2
     |- scripts
        |- models
        |- views
        |- templates
|- index.html
|- scripts
    |- app.js
|- styles

What I need is a way to concatenate / minify / uglify all of module1 into its own single file (say module1.min.js). Then that file should be versioned and references to module1 in other JS files (in other modules) to be updated accordingly. That way, I can have the modules downloaded to client only when the corresponding functionality is invoked from client, while still getting benefits of caching and cache busting. This helps avoid the costly download if I were to concatenate all js files for the entire app into a single file.

Is there any solution for that?

I did like the answer from developer JBCP in this thread - Prevent RequireJS from Caching Required Scripts

However, it involves tweaking the requirejs library itself, which my client isn't too inclined to do (for obvious reasons).

I use grunt for builds and so, I looked at grunt tasks - concat, usemin, rev. And I use requireJS in the app. But I can't find a solution for updating the references to module1 in js files from other modules, I'm stuck. Looking for solution for this issue or alternate approaches for building module level min.js files along with cachebusting.

Any help is greatly appreciated.

Thanks, DJ

解决方案

To concatenate, use "grunt-contrib-concat".

To minify and uglify JavaScript files, use "grunt-contrib-uglify".

To cache bust:

1) use "grunt-cache-busting" - it rename both the file and reference in the html with md5 hash of the file.

2) If you want to append custom string to file name,

you can use "grunt-text-replace" or "grunt-cache-breaker" to rename the reference in the html file.

you can use "grunt-contrib-copy" to rename the file name.

Ex:-

module.exports = function (grunt) {
    var timeStamp;

    // Project configuration.
    grunt.initConfig({
copy: {            
            rename: {
                files: [
                    {
                        expand: true,
                        dot: true,
                        cwd: 'js/',
                        dest: 'dist/js/',
                        src: [
                            '*.*'
                        ],
                        rename: function (dest, src) {
                            return dest + src.replace('.js','.' + timeStamp + '.js');
                        }
                    }
                ]
            }
},
replace: {

            bust: {
                src: ['dist/*.html'],
                overwrite: true,                 // overwrite matched source files
                replacements: [
                    {
                        from: '.js',

                        to: function () {
                            timeStamp = new Date().getTime() ;
                            return '.' + timeStamp + '.js';
                        }
                    }
                ]
            }
        }
});
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-text-replace');

To remove origional files - use "grunt-contrib-clean". You may want to use another "copy" tasks for this.

For reference: my default task. grunt.registerTask('default', ['clean', 'copy:dist', 'replace','copy:rename','clean:old', 'copy:after','clean:after']);

这篇关于使用grunt为多个js文件进行Cachebusting的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！