使用Grunt + Bower中的grunt-wiredep获取绝对路径

Question

grunt-wiredep任务输出的是相对路径的资源。我需要用绝对路径。 所以，按照这里建议的方式重新配置了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>

所以，我尝试了这个替换块。注意 正则表达式：

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

但是看起来 {{filePath}} 是在稍后被替换，因此 RegEx 没有产生预期的结果。

如何处理这种情况最理想呢？

- Moon

Answer 1

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

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

例如，像这样做，并进行您的配置所需的任何调整：

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

- Robert Noack

---

这是正确的，忽略路径将从模板中排除。 - Kiko Seijo

Answer 2

在Robert Noack的回答基础上，您可以将正则表达式用作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 -->

- Walter Mazza