用于资产版本控制的 Grunt 插件答案

【问题标题】：Grunt plugin for assets versioning用于资产版本控制的 Grunt 插件
【发布时间】：2014-03-25 00:47:40
【问题描述】：

我正在寻找一个 grunt 插件，它会自动更改对 html 文件中静态资产 (js/css) 的引用，如下所示：

<link rel="stylesheet" type="text/css" href="style.css?v=12345678" />
<script src="script.js?v=12345678"></script>

我在 gruntjs.com/plugins -> "version" 进行了搜索，但似乎所有这些都更改了文件的实际版本，而不是对它们的引用。

我错过了吗？有没有可以执行此任务的插件？

【问题讨论】：

标签： javascript css version gruntjs

【解决方案1】：

为此，我使用grunt-filerev 进行版本控制，使用grunt-usemin 自动更新源文件中的引用。

这两个模块可以很好地协同工作（使用 filerev 提供的映射替换引用）

希望对你有帮助

编辑：一些代码示例（仅向您展示您的案例中有趣的部分）：

我仅在打包我的应用程序（用于部署）时使用 usemin 和 filerev：

在我的 index.html 的头部，以下代码告诉 usemin 获取 build 标记之间的所有文件并将其聚合到一个名为 ie-shims.js 的文件中

[...]
<!-- build:js /js/ie-shims.js -->
    <script src="/vendor/html5shiv/dist/html5shiv.js"></script>
    <script src="/vendor/respond/dest/respond.src.js"></script>
<!-- endbuild -->
[...]

接下来，在我的 gruntfile.js 中，我有两个节点：

[...]
filerev: {
    options: {
        encoding: 'utf8',
        algorithm: 'md5',
        length: 8
    },
    source: {
        files: [{
            src: [
                'www/js/**/*.js',
                'www/assets/**/*.{jpg,jpeg,gif,png,ico}'
            ]
        }]
    }
},
useminPrepare: {
    html: 'src/index.html',
    options: {
        dest: 'www'
    }
},

// usemin has access to the revved files mapping through grunt.filerev.summary
usemin: {
    html: ['www/*.html'],
    css: ['www/css/**/*.css'],
    js: ['www/js/**/*.js'],
    options: {
        dirs: ['www'],
        assetsDirs: ['www'],
        patterns: {
            js: [
                [/["']([^:"']+\.(?:png|gif|jpe?g))["']/img, 'Image replacement in js files']
            ]
        }
    }
} [...]

最后，我有一项艰巨的任务将所有这些放在一起：

grunt.registerTask('build', 'Build task, does everything', ['useminPrepare', 'filerev', 'usemin']);

然后，生成的 HTML 是这样的：

[...]
<script src="/js/ie-shims.9f790592.js"></script>
[...]

【讨论】：

非常感谢您的回复。我阅读了这些模块的文档并尝试使用它们。他们工作，但似乎我必须创建一个额外的目标文件夹，这是不行的。是否可以将 html 和 js 文件保留在自己的目录中，而不是将它们移动到新目录中？请看我项目的当前结构：pastebin.com/qcsaUBHC

【解决方案2】：

我在http://www.jayway.com/2014/01/20/clean-grunt/ 找到了一篇关于保持 Grunt 清洁的简洁帖子，其中介绍了整个文件夹结构、Gruntfile.js 配置和任务运行。您对先前答案的评论是关于文件夹结构的，因此它也应该对此有所帮助，因为根目录中的结构也没有 index.html 文件。

根据 grunt-usemin 的文档（和/或我链接的帖子）准备您的 html 文件
您需要添加grunt-contrib-copy，这样您就可以复制index_src.html 并将其重命名为index.html (used this for inspiration)，然后继续执行“usemin”任务。
将对资产的引用更改为相对路径（例如../js/controller.js）

然后像这样配置你的Gruntfile.js：

[...]
useminPrepare: {
    html: 'templates/index.html',
    options: {
        dest: 'js'
    }
},

// Concat - best to implement it this way for useminPrepare to inject the config
concat: {
    options: {
        separator: ';'
    },
    // dist configuration is provided by useminPrepare
    dist: {}
},

// Uglify - best to implement it this way for useminPrepare to inject the config
uglify: {
    // dist configuration is provided by useminPrepare
    dist: {}
},

filerev: {
    options: {
        encoding: 'utf8',
        algorithm: 'md5',
        length: 20
    },
    source: {
        files: [{
            src: [
                'js/**/*.js'
            ]
        }]
    }
},

copy: {
  rename: {
    files: [
      {
        cwd: 'templates',
        src: ['**/index_src.html'],
        dest: 'templates',
        rename: function(dest, src) {
          return dest + src.replace(/_src\.html$/i, '.html');
        }
      }
    ]
  }
},

// usemin has access to the revved files mapping through grunt.filerev.summary
usemin: {
    html: ['templates/index.html'],
    options: {
        assetsDirs: ['js']
    }
} [...]

我不能 100% 确定重命名文件的正则表达式，但请备份文件夹并尝试一下。另外，我根据您提供的 pastebin 链接回答，该链接不包含任何 css 文件。如果有的话，事情会变得有点复杂，所以请告诉我。

然后您可以使用 Bixi 建议的 grunt 任务，但包括您的复制步骤（以及 concat 和 uglify）

grunt.registerTask('build', 'Build task, does everything', [
'useminPrepare',
'concat',
'uglify',
'copy:rename',
'filerev',
'usemin'
]);

【讨论】：