使用 grunt 处理多个 js 文件的 Cachebusting

Question

对于 grunt / cachebusting 有几个关于 SO 的问题，但我没有找到任何与我正在寻找的内容足够接近的东西。因此，一个新的问题..

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

|- 应用程序

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

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

有什么解决办法吗？

我确实喜欢这个线程中开发人员 JBCP 的回答 - Prevent RequireJS from Caching Required Scripts

但是，它涉及调整 requirejs 库本身，我的客户不太愿意这样做（原因很明显）。

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

非常感谢任何帮助。

谢谢， DJ

Answer 1

要连接，请使用“grunt-contrib-concat”。

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

缓存半身像：

1) 使用“grunt-cache-busting” - 它使用文件的 md5 哈希重命名 html 中的文件和引用。

2) 如果您想将自定义字符串附加到文件名，

您可以使用“grunt-text-replace”或“grunt-cache-breaker”重命名 html 文件中的引用。

您可以使用“grunt-contrib-copy”重命名文件名。

例如：-

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');

要删除原始文件 - 使用“grunt-contrib-clean”。您可能需要为此使用另一个“复制”任务。

供参考：我的默认任务。 grunt.registerTask('default', ['clean', 'copy:dist', 'replace','copy:rename','clean:old', 'copy:after','clean:after']);