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

时间:2014-11-05 23:26:07

标签: javascript grunt-usemin

我一直遇到grunt-usemin的问题,它不会用单一的转换线替换非转动的参考块。参考块中的两个文件得到连接和uglified就好了;单个文件metadata.min.js也版本化得很好;但是,对revved文件的引用不会插入到index.html 中。只是没有加速的线。

我正在使用:

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

这是index.html参考块之前运行grunt build:

<!-- 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的错误吗?配置是否在某处?虽然没有真正回答,但这类似于:Usemin not replacing reference blocks in HTML

在桌子上打了一会儿。非常感谢任何见解。

3 个答案:

答案 0 :(得分:3)

尝试使用以下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修改的文件的对象。

在我的情况下,我有一个额外的&#34;公共/&#34;文件夹所以我的字符串与对象中的键不匹配,因此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>';
},

答案 1 :(得分:3)

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

assetDirs documentation

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

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

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

换句话说,根据上面的配置,usemin将搜索其中一个文件的存在:

富/酒吧/图像/ foo.12345678.png

酒吧/图像/ foo.12345678.png

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

答案 2 :(得分:0)

除了Micah关于获取正确的assetsDirs路径的内容之外,您还可以设置DEBUG变量以实际查看正在搜索文件的路径。

如果你的构建任务是“build”,那么你可以输入:

DEBUG = usemin:*,revvedfinder grunt build

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