试图了解如何使用 main-bower-files 在 gulp 任务中包含过滤器和选项答案

【问题标题】：Trying to understand how to include filter and options in a gulp task with main-bower-files试图了解如何使用 main-bower-files 在 gulp 任务中包含过滤器和选项
【发布时间】：2015-07-15 23:44:08
【问题描述】：

我想要一个带有main-bower-files 的 gulp 任务，它可以过滤和使用选项，例如 debugging 或 includeDev。我有一个bower_components 目录，我可以让任务使用过滤器或选项，但不能同时使用两者。我知道我可以在bower.json 文件中包含这些选项，但我很好奇是否以及如何在任务中同时执行这两项操作？

我正在查看 main-bower-files 的文档，但我想我不明白文档中的说明：var files = mainBowerFiles( [[filter, ] options] [, callback] );

这是我gulpfile.js的摘录

gulp.task('jsbower', function() {
  return gulp.src(bowerFiles('**/*.js'))
    .pipe(gulp.dest('build/scripts/vendor'));
});

我发现我也可以使用：bowerFiles({filter: '**/*.js'}))。我可以移动所有东西（来自 bower 组件的 css 也可以），没有过滤器，并显示调试：

gulp.task('jsbower', function() {
  return gulp.src(bowerFiles({debugging:true}))
    .pipe(gulp.dest('build/scripts/vendor'));
});

如何组合选项和过滤器？

【问题讨论】：

标签： gulp bower

【解决方案1】：

这就是我最终将 JavaScript 包从 bower_components 获取到 source/scripts/vendor 目录的方法

gulp.task('jsbower', function() {
  return gulp.src(mainBowerFiles('**/*.js', 
    { debugging: true, includeDev: true }), 
    { base: 'bower_components' })
    .pipe(gulp.dest('source/scripts/vendor'));
});

（思考......我可能不需要使用 devDependencies，依赖项似乎是 jQuery 和 GSAP 的正确分类，其中控制台日志更像是 devDependcency？）

从main-bower-file doc 了解到，添加base: 'bower_components 包括文件夹结构，但没有所有包的东西。这在source/scripts：

// from source/scripts/
.
└── vendor
    ├── consolelog
    │   └── consolelog.js
    ├── gsap
    │   └── src
    │       └── minified
    │           ├── TimelineMax.min.js
    │           ├── TweenMax.min.js
    │           ├── easing
    │           │   └── EasePack.min.js
    │           └── plugins
    │               └── CSSPlugin.min.js
    └── jquery
        └── dist
            └── jquery.js

关键似乎第一个字符串或数组是过滤器，然后其余的将是选项，main-bower-files 文档说。我认为这是我的简化翻译：gulp.src(mainBowerFiles(string or array,{key:value, key:value}))

省略base 使用 return gulp.src(mainBowerFiles('**/*.js', { debugging: true, includeDev: true })) 会得到我：

.
└── vendor
    ├── CSSPlugin.min.js
    ├── EasePack.min.js
    ├── TimelineMax.min.js
    ├── TweenMax.min.js
    ├── consolelog.js
    └── jquery.js

【讨论】：