Grunt + Bower 使用 grunt-wiredep 的绝对路径答案

【问题标题】：Absolute path using grunt-wiredep for Grunt + BowerGrunt + Bower 使用 grunt-wiredep 的绝对路径
【发布时间】：2014-06-08 19:04:52
【问题描述】：

grunt-wiedep 任务输出资产的相对路径。相反，我需要绝对路径。所以，我按照这里的建议重新配置了replace 块：https://github.com/stephenplusplus/grunt-wiredep/issues/46

但是，在按照建议指定 replace 块后，我将以下内容添加为我的脚本参考。如您所见，这是错误的。

<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 不会产生预期的结果。

处理这种情况的理想方法是什么？

【问题讨论】：

标签： gruntjs bower bower-install grunt-wiredep wiredep

【解决方案1】：

在 Wiredep 的 gruntfile.js 配置中添加以下内容： ignorePath: '/../../../public'

这将从wiredep创建的路径的开头删除该部分。

例如这样的事情，加上你的配置的任何调整：

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

【讨论】：

没错，忽略路径会从模板中排除

【解决方案2】：

要基于 Robert Noack 的答案，您可以使用 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 -->

【讨论】：