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

Question

我正在寻找一个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",但似乎所有这些都改变了文件的实际版本而不是对它们的引用.

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

Answer 1

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

这两个模块很好地协同工作(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>
[...]