grunt-usemin + grunt-rev,在构建时指向 CDN url 但保持修订号?
grunt-usemin + grunt-rev, point to CDN url on build but maintain revision number?
我正在使用 grunt-usemin in combination with 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>
我尝试使用 usemin 任务中的 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,未应用修订号。
我的问题:如何将我的 usemin 构建指向外部端点,同时保持构建期间创建的修订号?
作为参考,这里是我完整的 usemin 和 rev 任务(取自 yeoman backbone 样板文件):
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 任务配置如何获得我想要的结果:
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
访问修改后的文件名。在这里你可以找到一个例子:blockReplacements run before filerev linking
我正在使用 grunt-usemin in combination with 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>
我尝试使用 usemin 任务中的 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,未应用修订号。
我的问题:如何将我的 usemin 构建指向外部端点,同时保持构建期间创建的修订号?
作为参考,这里是我完整的 usemin 和 rev 任务(取自 yeoman backbone 样板文件):
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 任务配置如何获得我想要的结果:
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
访问修改后的文件名。在这里你可以找到一个例子:blockReplacements run before filerev linking