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

【问题标题】：Gulp and Bower - creating proper files structureGulp 和 Bower - 创建正确的文件结构
【发布时间】：2016-12-01 08:45:25
【问题描述】：

我正在将 Bower 添加到已经使用 Gulp 的项目中。我的文件夹结构是这样的：

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

我已经设法使用main-bower-files 和bower-normalize 将所有第3 方库复制到target/js。但它是扁平的（而且我没有将 bower-normalize 选项 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

我将非常乐意提供帮助！

【问题讨论】：

显示您的 gulpfile.js 文件可能会有所帮助，这样有人可以帮助您了解语法。
您需要将{base: '.'} 传递给您的 gulp.src 命令

标签： javascript gulp bower main-bower-files

【解决方案1】：

通过gulp-flatten，这将帮助您删除或替换文件的相对路径。和另外，我强烈推荐 wiredep。它会自动为您处理所有凉亭依赖项以及订单的依赖关系。希望这会对你有所帮助。

包含 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如果传入负数，输出中会包含底层父级的个数。

【讨论】：