grunt-usemin + grunt-rev，在构建时指向 CDN url 但保持修订号？答案

【问题标题】：grunt-usemin + grunt-rev, point to CDN url on build but maintain revision number?grunt-usemin + grunt-rev，在构建时指向 CDN url 但保持修订号？
【发布时间】：2015-07-31 14:39:23
【问题描述】：

我将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>

我尝试在 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 主干样板）：

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/{,*/}*.*',
            ]
        }
    }
}

【问题讨论】：

标签： javascript gruntjs grunt-usemin

【解决方案1】：

所以我发现只有 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。不幸的是，我需要一个额外的插件来做一些如此简单的事情，但是它确实有效！

【讨论】：

【解决方案2】：

其实你可以通过grunt.filerev.summary访问revved文件名。在这里你可以找到一个例子：blockReplacements run before filerev linking

【讨论】：