我将grunt-usemin与grunt-rev结合使用,用单个连接的脚本替换对未优化脚本的引用,并在每个构建上附加一个修订。
它接受这个:
<!-- build:js({.tmp,app}) scripts/main.js -->
<script src="scripts/custom_script1.js"></script>
<script src="scripts/custom_script2.js"></script>
<script src="scripts/models/custom_model.js"></script>
<!-- endbuild -->
,在grunt build
之后,输出如下:
<script src="scripts/b7197f7b.main.js"></script>
现在我的问题是:
我需要构建输出src
不相对于项目目录,而是指向外部URL,因为我的脚本将托管在CDN上。
// build should produce THIS instead:
<script src="www.my-cdn-url.com/scripts/b7197f7b.main.js"></script>
我已经尝试在userin任务中使用blockReplacement配置对象:
// this is what I've tried (note the blockReplacement):
usemin: {
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
dirs: ['<%= yeoman.dist %>'],
blockReplacements: {
js: function (block) {
return '<script type="text/javascript" src="www.my-cdn-url.com/scripts/'+block.dest+'"></script>';
}
}
}
},
并且,虽然这适用于更改src
属性以指向我的CDN, 修订号未被应用。
我的问题:我如何将我的userin构建指向外部端点,同时维护构建期间创建的修订号?
作为参考,以下是我完整的userin和rev任务(取自yeoman主干模板):
usemin: {
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
dirs: ['<%= yeoman.dist %>'],
blockReplacements: {
js: function (block) {
return '<script type="text/javascript" src="www.my-cdn-url.com/scripts/'+block.dest+'"></script>';
},
css: function(block) {
return '<link rel="stylesheet" href="www.my-cdn-url.com/styles/'+block.dest+'">';
}
}
}
},
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/scripts/{,*/}*.js',
'<%= yeoman.dist %>/styles/{,*/}*.css',
'<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}',
'/styles/fonts/{,*/}*.*',
]
}
}
}
所以我发现只有grunt-rev
和grunt-usemin
没有办法做到这一点,我需要引入一个额外的grunt插件:grunt-cdnify
。
下面是如何定义任务配置来得到我想要的结果:
cdnify: {
dist: {
options: {
base: '//my-cdn-url.com',
cc: true
},
files: [{
expand: true,
cwd: 'dist',
src: 'index.html',
dest: 'dist'
}]
}
}
/scripts/
和/styles/
被自然地附加到基础URL。不幸的是,我需要一个额外的插件来做一些如此简单的事情,但嘿,它的工作原理!
实际上您可以通过grunt.filerev.summary
访问已修改的文件名。blockreplacement在filerev链接