[英]Grunt plugin for assets versioning
我正在寻找一个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”,但似乎所有这些都改变了文件的实际版本而不是对它们的引用。
我错过了吗? 是否有可以执行此任务的插件?
为此,我使用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>
[...]
我发现了一个关于保持Grunt干净的简洁帖子,它遍历整个文件夹结构,Gruntfile.js配置和任务运行,请访问http://www.jayway.com/2014/01/20/clean-grunt/ 。 您对早期答案的评论是关于文件夹结构的,所以它也应该有帮助,因为那里的结构也没有index.html文件。
grunt-usemin
的文档(和/或我链接的帖子)准备你的html文件 grunt-contrib-copy
,因此您可以复制index_src.html并将其重命名为index.html( 用于获取灵感 ),然后继续执行'usemin'任务。 ../js/controller.js
资产的引用更改为相对路径(例如../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' ]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.