Grunt usemin 任务未正确更新嵌套的相对路径答案

【问题标题】：Grunt usemin task not updating nested relative paths correctlyGrunt usemin 任务未正确更新嵌套的相对路径
【发布时间】：2015-03-08 05:23:17
【问题描述】：

我有一个使用“webapp-generator”搭建的 Yeoman 项目，其中包含一个带有嵌套 HTML 文件的静态网站，类似于以下结构：

-root/
  index.html
    -directory/
       file1.html
    -directory2/
       file2.html
    -js/
       (revved .js files)
    -css
       (revved .css files)

我正在使用usemin 和filerev 任务来更新.html 文档上的filerevved 文件路径。它会正确更新 js/css/images 上的所有文件名，并在根 index.html 上正常工作。但是，在嵌套的 HTML 文件中，它不会替换对正确嵌套路径的引用。

例如。

js/scripts.js 重命名为 js/827385.scripts.js

在index.html

中

<scripts src="js/scripts.js"></scripts>

解析为：<scripts src="js/827385.scripts.js"></scripts>

但在目录/file1.html（或任何其他嵌套的 html 文件）

<scripts src="../js/scripts.js"></scripts>

也转换为：<scripts src="js/827385.scripts.js"></scripts>

忽略../相对路径

有没有办法调整 Grunt 任务以了解目录中文件的相对深度，从而将相对指示符 ../ 保留在重命名的路径中？

下面是相关 Grunt 任务的代码 sn-p。

PS：我已经关注了这个 Stack Overflow 问题中的一些可能的答案：How should I configure grunt-usemin to work with relative path 无济于事。

     // Renames files for browser caching purposes
    rev: {
        dist: {
          files: {
            src: [
              '<%= config.dist %>/scripts/{,**/}*.js',
              '<%= config.dist %>/styles/{,**/}*.css',
              '<%= config.dist %>/images/{,**/}*.*',
              '<%= config.dist %>/styles/fonts/{,**/}*.*',
              '<%= config.dist %>/*.{ico,png}'
            ]
          }
        }
      },

      // Reads HTML for usemin blocks to enable smart builds that automatically
      // concat, minify and revision files. Creates configurations in memory so
      // additional tasks can operate on them
      // <%= config.dist %>
      useminPrepare: {
        options: {
          dest: 'out',
          // root: '<%= config.app %>'
        },
        html: '<%= config.app %>/index.html'
          // root: '<%= config.app %>'
      },

      // Performs rewrites based on rev and the useminPrepare configuration
      usemin: {
        options: {
          assetsDirs: [
            '<%= config.dist %>',
            '<%= config.dist %>/images',
            '<%= config.dist %>/styles'
          ]
        },
        html: ['<%= config.dist %>/**/*.html'],
        css: ['<%= config.dist %>/styles/**/*.css']
      },

【问题讨论】：

标签： gruntjs yeoman grunt-usemin minimatch

【解决方案1】：

就我而言，我发现问题在于 html 文件中的 usemin 配置：

如果你的 index.html 中有这个 usemin 指令：

<!-- build:js styles/jquery.js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<!-- endbuild -->

在 directory/file1.html 中，您应该尝试在其中使用完整路径：

<!-- build:js /scripts/jquery.js-->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<!-- endbuild-->

这将被转换成类似<script src="/scripts/jquery.34ad31c3.js"></script>的东西。

【讨论】：