node.js – Gulp,Wiredep和Bower依赖项

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

我更新了.bowerrc中的目录,所以现在每次我做一个bower安装它将使用正确的：

{
  "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服务将会起作用,但是一旦我安装了一个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'));
});

解决方法

您可以使用wiredep的目录选项：

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

另请参阅their documentation