Grunt插件的资产版本 [英] Grunt plugin for assets versioning

问题描述

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

I'm looking for a grunt plugin that will automatically change the references to static assets (js/css) inside an html file like this:

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

我在gruntjs.com/plugins - >版本搜索，但似乎所有他们更改文件的实际版本，而不是引用它们。

I searched at the gruntjs.com/plugins -> "version", but it seems that all of them change the actual version of the files instead of references to them.

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

Am I missing it? Is there a plugin that can perform this task?

推荐答案

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

For this I use grunt-filerev for the versionning and grunt-usemin for the automatic update of the references in source files.

这两个模块工作得很好（usemin用filerev提供的映射替换引用）

These two modules works well together (usemin replacing references with a mapping provided by filerev)

希望这有助于

编辑一些代码示例（仅显示您感兴趣的内容）：

edit: a few code examples (only showing you what's interesting in your case):

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

I use usemin & filerev only when packaging my app (for deployment) :

在我的index.html的头部，以下代码告诉usemin将所有文件夹在 build 标记并将其整合为一个名为 ie-shims.js

In the head of my index.html, the following code tell usemin to take all the files between the build tag and agregate it into one named 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中， ：

Next, in my gruntfile.js, i have two node :

[...]
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任务，把所有的一起：

Finally, I have a grunt task that put all that together :

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

然后，生成的HTML如下：

Then, the generated HTML is like that :

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

这篇关于Grunt插件的资产版本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！