Gulp,Wiredep和Bower依赖

时间:2015-01-29 18:57:14

标签: node.js gulp bower wiredep

我想调整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'));
});

2 个答案:

答案 0 :(得分:3)

您可以使用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'));

另请参阅their documentation

答案 1 :(得分:0)

替代wiredep您可以使用bindep(对于安装类型npm bindep或https://github.com/publicocean0/bindep)。它允许使用可选子模块,资源映射,文件转换(例如更少文件)和自定义预处理来创建复杂项目。 在html中你可以指定你想要的单个bower组件中的子模块,你可以过滤文件,预处理传递你的参数的文件...... 在配置中,您可以设置放置每种类型的资源,模板,转换器,本地依赖项等的位置....