grunt-usemin 没有用 revved 文件行替换参考块答案

【问题标题】：grunt-usemin not replacing reference block with revved file linegrunt-usemin 没有用 revved 文件行替换参考块
【发布时间】：2014-11-05 23:26:07
【问题描述】：

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

我正在使用：

grunt-usemin 2.6.0
grunt-filerev 2.1.1
用于模板的 Zend 框架（因此有奇怪的模板路径）

这是在运行 grunt build 之前的 index.html 参考块：

<!-- 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 build 之后的 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

有一阵子我的头撞在桌子上了。非常感谢任何见解。

【问题讨论】：

标签： javascript grunt-usemin

【解决方案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>';
        }
    }
  }
}

这将回显其生成的当前块和一个包含由 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>';
},

【讨论】：

【解决方案2】：

这也发生在我身上，问题是由于 usemin 块中没有正确的assetDirs 引起的。您需要确保您的assetDirs 数组包含您的revved 文件的父文件夹。

assetDirs documentation

这是我们应该开始查找当前查看的文件中引用的资产的修订版本的目录列表。

usemin: {
    html: 'build/index.html',
    options: {
        assetsDirs: ['foo/bar', 'bar']
    }
}

假设您在 index.html 中有一个对 /images/foo.png 的引用，usemin 将在 assetsDirs 选项中的任何目录中搜索 /images/foo.png 的 revved 版本，例如 /images/foo.12345678.png .

换句话说，给定上述配置，usemin 将搜索以下文件之一的存在：

foo/bar/images/foo.12345678.png

bar/images/foo.12345678.png

@Billy Blaze 应该能够通过将他的 usemin 块中的 assertDirs 更新为 assetsDirs: ['js/dest/rev/test', 'public'] 来替换他的自定义 blockReplacements 函数。

【讨论】：

【解决方案3】：

除了 Micah 所说的获取正确 assetsDirs 路径之外，您还可以设置 DEBUG 变量以实际查看正在搜索哪些路径来查找您的文件。

如果您的构建任务是“构建”，那么您将输入：

DEBUG=usemin:*,revvedfinder grunt build

这将有助于准确跟踪您在 assetsDirs 中需要的路径。

【讨论】：