如何控制wiredep如何生成bower文件路径以及如何控制添加/删除哪些文件

时间:2014-07-29 20:25:28

标签: grunt-wiredep

我的应用程序的目录如下

app - > appName - > index.html(js,css)

由于某种原因,这个appName包装器文件夹弄乱了有线电视

{ dest: '.tmp/concat/scripts/vendor.js',
      src: 
       [ '../bower_components/es5-shim/es5-shim.js',
         '../bower_components/angular/angular.js',
         '../bower_components/json3/lib/json3.js',
         '../bower_components/angular-resource/angular-resource.js',
         '../bower_components/angular-cookies/angular-cookies.js',
         '../bower_components/angular-sanitize/angular-sanitize.js',
         '../bower_components/angular-animate/angular-animate.js',
         '../bower_components/angular-touch/angular-touch.js',
         '../bower_components/angular-route/angular-route.js' ] },

如果目录如下,这就是产生的内容

app - >的index.html(JS,CSS)

{ dest: '.tmp/concat/scripts/vendor.js',
      src: 
       [ 'bower_components/es5-shim/es5-shim.js',
         'bower_components/angular/angular.js',
         'bower_components/json3/lib/json3.js',
         'bower_components/angular-resource/angular-resource.js',
         'bower_components/angular-cookies/angular-cookies.js',
         'bower_components/angular-sanitize/angular-sanitize.js',
         'bower_components/angular-animate/angular-animate.js',
         'bower_components/angular-touch/angular-touch.js',
         'bower_components/angular-route/angular-route.js' ] },

和wiredep会改变index.html的脚本内容,我该如何控制该流?有时它会从其脚本[src]

中删除角度消毒

3 个答案:

答案 0 :(得分:13)

您应该使用wiredep的替换选项:

wiredep(
    {
        fileTypes: {
            html: {
                replace: {
                    js: '<script src="/app/appName/{{filePath}}"></script>'
                }
            }
        }
    })

将生成:

<script src="/app/appName/bower_components/angular/angular.js"></script>

答案 1 :(得分:9)

这是我的gulp设置(同样的原则适用于Grunt,只需将相同的选项传递给它)。

gulp.task('wiredep' , function()
{
    return gulp.src('./app/index.html')
           .pipe(wiredep({
               'ignorePath': '../'
           }))
          .pipe(gulp.dest('./app'));
});

您可以查看lib / inject-dependencies.js中的wiredep源代码(行:80~85)

map(function (filePath) {
    return $.path.join(
      $.path.relative($.path.dirname(file), $.path.dirname(filePath)),
      $.path.basename(filePath)
    ).replace(/\\/g, '/').replace(ignorePath, '');
  }).

它只是替换你提供的位(或者如果你不给它一个)。

希望有所帮助。

答案 2 :(得分:5)

您是否尝试将cwd添加到options区块?

例如:

  // Automatically inject Bower components into the app
    wiredep: {
      options: {
        cwd: 'app/appName'
      }
      ....
    }