Gulp,Wiredep和Bower依赖

Question

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

我更新了目录.bowerrc,所以现在每次我做的bower install时候都会使用正确的目录:

{
  "directory": "app/bower_components"
}

现在,如何gulp-wiredep在我的主Sass文件中编写正确的Sass路径位置？

例如,gulp-wiredep在我的main.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任务:

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'));
});

但我不知道如何配置它来做我需要的东西,我找不到任何关于它的文档.

我知道如果我在我的sass文件中手动更改该路径"app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss",那么gulp serve它将起作用,但是一旦我安装了一个bower组件,它就会将该路径更改为没有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

您可以使用directorywiredep选项：

  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'));

另请参阅他们的文档