Question

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

如何组合选项和过滤器？

Answer 1

以下是我最终努力将bower_components的JavaScript包导入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的正确分类，其中consolelog更像是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 doc说明了这一点。我认为这是我简化的翻译：gulp.src（mainBowerFiles（string或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

尝试了解如何使用main-bower-files

1 个答案: