使用grunt-wiredep为Grunt + Bower提供的绝对路径

Question

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

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

Answer 1

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

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

例如,像这样的东西,加上你的配置调整:

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

Answer 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 -->