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

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

Answer 2

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

Gulp、Wiredep 和 Bower 依赖项

Gulp, Wiredep and Bower dependencies

node.js

bower

gulp

wiredep