我正在寻找一个 grunt 插件,它会自动更改对 html 文件中静态 Assets (js/css) 的引用,如下所示:
<link rel="stylesheet" type="text/css" href="style.css?v=12345678" />
<script src="script.js?v=12345678"></script>
我在 gruntjs.com/plugins -> “版本”中进行了搜索,但似乎所有这些都更改了文件的实际版本而不是对它们的引用。
我错过了吗?是否有可以执行此任务的插件?
最佳答案
为此我使用 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>
[...]
关于javascript - 用于 Assets 版本控制的 Grunt 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21969422/