Gulp，Wiredep和Bower依赖

我想调整一个gulpfile.js并将我的bower_components/文件夹更改为app/bower_components/ 。

我更新.bowerrc的目录，所以现在每次我做一个bower install它将使用正确的一个：

 { "directory": "app/bower_components" } 

现在， gulp-wiredep如何在我的主Sass文件中写入正确的Sasspath位置？

例如， gulp-wiredep在我的main.scss文件中，在// bower:scss之后添加了以下行// bower:scss ：

@import "bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";

现在应该是@import "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";

我怎样才能改变这条路？ 我相信这是wiredep任务的一些configuration：

 gulp.task('wiredep', function () { var wiredep = require('wiredep').stream; gulp.src('app/styles/*.scss') .pipe(wiredep({ ignorePath: /^(\.\.\/)+/ })) .pipe(gulp.dest('app/styles')); gulp.src('app/*.html') .pipe(wiredep({ exclude: ['bootstrap-sass-official'], ignorePath: /^(\.\.\/)*\.\./ })) .pipe(gulp.dest('app')); }); 

但我不知道如何configuration，以做我所需要的，我找不到任何文件。

我知道，如果我手动将sass文件中的path更改为"app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss" ，那么"app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss" gulp serve将起作用，但只要我安装了一个bower组件会改变path到没有app/在一开始，这将打破任务。

如何解决这个问题？

完成：

 // inject bower components gulp.task('wiredep', function () { var wiredep = require('wiredep').stream; gulp.src('app/styles/*.scss') .pipe(wiredep({ fileTypes: { scss: { replace: { sass: '@import "app/{{filePath}}";', scss: '@import "app/{{filePath}}";' } } }, ignorePath: /^(\.\.\/)+/ })) .pipe(gulp.dest('app/styles')); gulp.src('app/*.html') .pipe(wiredep({ exclude: ['bootstrap-sass-official'], ignorePath: /^(\.\.\/)*\.\./ })) .pipe(gulp.dest('app')); }); 

Answer 1

您可以使用wiredep的directory选项：

  gulp.src('app/styles/*.scss') .pipe(wiredep({ directory: 'app/bower_components', fileTypes: { scss: { replace: { scss: '@import "src/app/{{filePath}}";' } } }, ignorePath: /^(\.\.\/)+/ })); gulp.src('app/*.html') .pipe(wiredep({ directory: 'app/bower_components', exclude: ['bootstrap-sass-official'], ignorePath: /^(\.\.\/)*\.\./ })) .pipe(gulp.dest('app')); 

另外，请参阅他们的文档

Answer 2

而不是wiredep你可以使用bindep（安装typesnpm bindep或https://github.com/publicocean0/bindep ）。 它允许创build具有可选子模块，资源映射，文件转换（例如较less文件）和自定义预处理的复杂项目。 在html中，你可以指定你想要的一个单独的组件里面的子模块，你可以过滤文件，预处理文件传递你的参数…在configuration中，你可以设置你想放置的资源，模板，转换器，本地依赖， ….