grunt-usemin没有使用revved文件替换引用块行

Question

我一直遇到grunt-usemin的问题，它无法用单个版本化的行替换非版本化引用块。引用块中的两个文件被合并和压缩得很好；单个文件metadata.min.js也被成功地版本化，但是版本化文件的引用没有被插入到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>

任何原因导致修订行不应该看起来像这样吗？

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

这是grunt-usemin的一个bug吗？还是配置有误？虽然没有得到确切的答案，但这与以下问题类似：Usemin not replacing reference blocks in HTML

我已经苦思冥想了一段时间。非常感谢任何见解。

- Tim

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>';
        }
    }
  }
}

这将回显当前生成的区块及文件版本化修改对象。

在我的情况下，我有一个额外的"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>';
},

- Billy Blaze

Answer 2

这个问题也发生在我身上，原因是usemin块中没有正确的assetDirs。你需要确保你的assetDirs数组包含了你的revved文件所在的父文件夹。 assetDirs文档是一个目录列表，我们应该从这些目录开始查找当前文件中引用的资产的revved版本。

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

假设在index.html中你有一个对/images/foo.png的引用，usemin将在assetsDirs选项中的任何目录中搜索/images/foo.12345678.png的版本。换句话说，根据上述配置，usemin将搜索以下文件之一的存在：

foo/bar/images/foo.12345678.png

bar/images/foo.12345678.png

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

- Micah

Answer 3

除了Micah提到的获取正确assetsDirs路径之外，您还可以将DEBUG变量设置为实际查看搜索文件路径。

如果您的构建任务是“build”，那么您应该输入以下内容：

DEBUG=usemin:*,revvedfinder grunt build

这将有助于精确定位您在assetsDirs中需要的路径。

- Damon Casale