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

时间:2015-07-15 23:44:08

标签: gulp bower

我希望main-bower-files有一个gulp任务可以过滤,并使用debuggingincludeDev等选项。我有一个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'));
});

如何组合选项和过滤器?

1 个答案:

答案 0 :(得分:0)

以下是我最终努力将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