8

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

2 回答 2

3

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

另外，请参阅他们的文档

于 2015-01-29T19:01:26.490 回答
0

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

于 2017-01-18T16:35:59.953 回答