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

- zok

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

此外，请参阅它们的文档。

- knutwalker

---

我尝试过了，但它不起作用。文档中说它使用默认的“.bowerrc”目录，所以那样做是不必要的，对吧？ - zok

我也尝试过更改cwd，但显然那是wiredep搜索bower.json的地方。 - zok

对我来说似乎可以工作，但你必须将目录选项添加到流式传输app/styles/*.scss的任务中，而不是像我的答案中所示的html任务。如果你删除了旧的bower_components文件夹并且wiredep仍然在那里搜索，则该任务应该会失败，并出现wiredep无法找到任何依赖项的投诉。无论如何，你可以使用替换覆盖，但你必须以不同的方式指定它。请参见我的更新答案。 - knutwalker

是的，我知道，问题是我忘记把它包装在“fileTypes”中了！谢谢！ - zok

Answer 2

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

- user6228847