javascript - grunt-usemin 没有用 revved 文件行替换引用 block

Question

我在使用 grunt-usemin 时遇到了一个问题，它没有用单个 revved 行替换非 revved 引用 block 。引用 block 中的两个文件得到连接和丑化就好了；单个文件 metadata.min.js 也版本化得很好；但是，对修订文件的引用不会插入到 index.html 中。只是非 revved 行。

我正在使用:

• grunt-usemin 2.6.0
• grunt-filerev 2.1.1
• 用于模板化的 Zend 框架(因此有奇怪的模板路径)

这是在运行 grunt build 之前的 index.html 引用 block :

<!-- build:js js/dest/metadata.min.js -->
<script src="js/metadata/MetadataController.js"></script>
<script src="js/metadata/MetadataService.js"></script>
<!-- endbuild -->

这是相关的 Grunt 配置:

useminPrepare: {
  html: '../cdm_common/cdm/layouts/scripts/index.html',
  options: {
    dest: 'dist',
    root: '.'
  }
},

filerev: {
  options: {
    encoding: 'utf8',
    algorithm: 'md5',
    length: 8
  },
  js: {
    src: ['dist/js/dest/*.js'],
    dest: 'js/dest/rev/test'
  }
},

usemin: {
  html: '../cdm_common/cdm/layouts/scripts/index.html',
  options: {
    assetsDirs: ['js/dest/rev/test']
  }
},

grunt.registerTask('build' ['useminPrepare','concat:generated','uglify:generated','filerev','usemin']);

这是运行 grunt 构建之后的 index.html:

<script src="js/dest/metadata.min.js"></script>

revved 行不应该像这样的原因是什么？

<script src="js/dest/metadata.min.a5851d60.js"></script>

这是 grunt-usemin 的错误吗？配置是否关闭？虽然没有真正回答，但这类似于:Usemin not replacing reference blocks in HTML

有一段时间我一直在用头撞 table 。非常感谢任何见解。

Answer 1

尝试使用以下 usemin 配置运行 grunt --debug 以获得更多信息:

usemin: {
  html: '../cdm_common/cdm/layouts/scripts/index.html',
  options: {
    assetsDirs: ['js/dest/rev/test'],
    blockReplacements: {
        js: function (block) {
            grunt.log.debug(JSON.stringify(block.dest));
            grunt.log.debug(JSON.stringify(grunt.filerev.summary));

            return '<script src="'+block.dest+'"></script>';
        }
    }
  }
}

这将回显其生成的当前 block 和一个包含由 filerev 修改的文件的对象。

在我的例子中，我有一个额外的“public/”文件夹，所以我的字符串与对象中的键不匹配，因此 usemin 无法找到 filerev 创建的新位置:

[D] "js/build/vendors.js"
[D] "public\\js\\build\\vendors.js": "public\\js\\build\\vendors.4e02ac3d2e56a0666608.js", "public\\js\\build\\main.js": "public\\js\\build\\main.acd1b38e56d54a170d6d.js"}

最终我用这个自定义的 blockReplacements 函数解决了这个问题，(即替换 public/和讨厌的 Windows 路径):

js: function (block) {
    var arr = {};
    for (var key in grunt.filerev.summary) {
        arr[key.replace(/\\/g, "/").replace(/\/\//g, "/").replace("public/", "")] = grunt.filerev.summary[key].replace(/\\/g, "/");
    }

    var path = (arr[block.dest] !== undefined) ? arr[block.dest] : block.dest;

    return '<script src="{{ asset(\''+Twig.basePath + path +'\') }}"></script>';
},