Абсолютный путь с использованием grunt-wiredep для Grunt + Bower

Задача grunt-wiedep выводит относительные пути для активов. Вместо этого мне нужны абсолютные пути. Итак, я переконфигурировал блок replace, как предлагается здесь: https://github.com/stephenplusplus/grunt-wiredep/issues/46

Но, указав блок replace, как было предложено, я добавлю следующую ссылку в качестве ссылки script. Как вы можете видеть, это неправильно.

<script src="/../../../public/vendors/jquery/dist/jquery.js"></script>
<script src="/../../../public/vendors/angular/angular.js"></script>
<script src="/../../../public/vendors/angular-resource/angular-resource.js"></script>
<script src="/../../../public/vendors/angular-route/angular-route.js"></script>

Вместо этого я хочу:

<script src="/vendors/jquery/dist/jquery.js"></script>
<script src="/vendors/angular/angular.js"></script>
<script src="/vendors/angular-resource/angular-resource.js"></script>
<script src="/vendors/angular-route/angular-route.js"></script>

Итак, я попробовал это для своего блока замены. Обратите внимание на RegEx:

replace: {
    js: '<script src="/{{filePath}}"></script>'.replace(/\.\.\/public/gi, ''),
    css: '<link rel="stylesheet" href="/{{filePath}}" />'.replace(/\.\.\/public/gi, '')
}

Но оказывается, что {{filePath}} заменяется на более позднее время, и, следовательно, RegEx не дает ожидаемых результатов.

Каким будет идеальный способ справиться с такой ситуацией?

Ответ 1

В конфигурации gruntfile.js для wiredep добавьте следующее: ignorePath: '/../../../public'

Это удалит эту часть с начала пути, созданного wiredep.

Например, что-то вроде этого, плюс любые настройки для вашего конфига:

wiredep: {
    target: {
        src: [
            '/Views/**/*.html',
        ],          
        ignorePath: '/../../../public',
        dependencies: true,
        devDependencies: false, 
    }
},

Ответ 2

Чтобы ответить на вопрос Роберта Ноака, вы можете использовать RegEx вместо своего значения ignorePath. Лично я использую этот следующий шаблон для удаления относительных путей, но сохраняю последнюю прямую косую черту из совпадения, чтобы конечный результат был абсолютным путем:

/^(\/|\.+(?!\/[^\.]))+\.+/

Вот как это работает:

^                  // Start matching at first character in string
(
    \/             // [1] Look for "/"
  |                //  OR
    \.+            // [2] Look for "." repeated one or more times, followed by
    (?!            //   [3] Don't match
        \/[^\.]    //     "/" followed by a character that is not "."
    )              
)+
\.+                // [4] Look for remaining "." not including the next "/"

Итак, если, например, наш выходной путь к файлу /../../../path/to/file.js, мы сначала удалим первый / [1], затем удалим ../../ [2], но пропустим последний ../ [3]. Теперь мы остаемся с ../path/to/file.js, но затем удалим .. [4], в результате получим /path/to/file.js

В конце концов, моя конфигурация выглядит следующим образом:

wiredep: {
    app: {
        src: [
            "<%= config.app %>/templates/**/*.html"
        ],
        exclude: [
            "modernizr"
        ],
        ignorePath: /^(\/|\.+(?!\/[^\.]))+\.+/,
        devDependencies: true
    }
}

И мой вывод HTML выглядит так:

## BEFORE ##
<!-- build:js(.) assets/vendor/vendor.js -->
<!-- bower:js -->
<script src="../../../bower_components/jquery/dist/jquery.js"></script>
<script src="../../../bower_components/jquery-waypoints/waypoints.js"></script>
<script src="../../../bower_components/holderjs/holder.js"></script>
<!-- endbower -->
<!-- endbuild -->

## AFTER ##
<!-- build:js(.) assets/vendor/vendor.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/jquery-waypoints/waypoints.js"></script>
<script src="/bower_components/holderjs/holder.js"></script>
<!-- endbower -->
<!-- endbuild -->