Gulp和Bower-创建正确的文件结构

Question

我正在使用已经使用Gulp的项目中添加Bower。我的文件夹结构就像：

 |- bower_components
 |   |- dependency1
 |   |   |- dist
 |   |       |- lib1.js
 |   |       |- lib1.min.js
 |   |
 |   |- dependency2
 |       |- core
 |           |- sub
 |           |   |- extra.js
 |           |
 |           |- lib2.js
 |
 |- target
     |- js

我已经设法将所有第三方库将所有第三方库复制到目标/JS，并使用主湾文件和Bower Normalize。但是它是变平的（我没有将bower差异化选项 flatten设置为true！），所以看起来像：

target
 |- js
     |- lib1.js
     |- extra.js
     |- lib2.js

文件lib1.js，extra.js和lib2.js在Bower.json配置文件中标记为main。

我想实现的是要拥有以下文件结构：

target
 |- js
     |- dependency1
     |   |- lib1.js
     |
     |- dependency2
         |-  sub
         |    |- extra.js
         |
         |-  lib2.js

我真的会为帮助！

Answer 1

通过Gulp-Flatten， 这将帮助您删除或替换文件的相对路径。和 另外，我强烈建议 有线。它会自动 为您处理所有的Bower依赖性以及订单 依赖关系。希望这对您有帮助。

带有bower组件的源目录：

 |- bower_components
 |   |- dependency1
 |   |   |- dist
 |   |       |- lib1.js
 |   |       |- lib1.min.js
 |   |
 |   |- dependency2
 |       |- core
 |           |- sub
 |           |   |- extra.js
 |           |
 |           |- lib2.js
 |
 |- target
     |- js

使用Gulp -Flatten-

gulp.src(['bower_components/**/*.js'])
  .pipe(flatten({ includeParents: [1, 1]} ))
  .pipe(gulp.dest('build/'));

将创建此结构（从上方树目录）：

|- bower_components
|   |- dependency1
|   |   |- lib1.js
|   |
|   |- dependency2
|            |-  sub
|            |    |- extra.js
|            |
|            |-  lib2.js

includeParents: [1, 1]如果通过两个数字的数组，则从顶部和底部的父母都将在文件的结果路径中保持。

includeParents: 1如果以正数为正数，它将包括输出中的顶级父母的数量。

includeParents: -1如果以负数为负数，它将包括输出中的底级父母的数量。