Выполнить задание usemin не правильно обновляя вложенные относительные пути

У меня есть проект Yeoman с поддержкой 'webapp-generator', который содержит статический веб-сайт с вложенными HTML-файлами, похожими на эту структуру:

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

я использую usemin а также filerev Задачи для обновления пути к файлу revved в документах.html. Он корректно обновляет все имена файлов в 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.

PS: я уже следовал за некоторыми из возможных ответов в этом вопросе переполнения стека: как мне настроить grunt-usemin для работы с относительным путем безрезультатно.

     // 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']
      },

1 ответ

Решение

В моем случае я обнаружил, что проблема заключалась в конфигурации usemin в html-файлах:

Если у вас есть в вашем index.html эта директива usemin:

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

В каталоге /file1.html вы должны попытаться использовать в нем полный путь:

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

который будет преобразован во что-то вроде <script src="/scripts/jquery.34ad31c3.js"></script>,

Другие вопросы по тегам