11

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

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

4

2 回答 2

16

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

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

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

wiredep: {
    target: {
        src: [
            '/Views/**/*.html',
        ],          
        ignorePath: '/../../../public',
        dependencies: true,
        devDependencies: false, 
    }
},
于 2014-07-03T04:22:21.787 回答
10

为了建立 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 -->
于 2014-09-24T19:25:33.683 回答