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

Question

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

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

我已经成功使用 main-bower-files 将所有第 3 方库复制到 target/js和 bower-normalize 。但它是扁平化的(而且我没有将 Bower-normalize 选项扁平化设置为 true!)，所以它看起来像:

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

文件lib1.js、extra.js和lib2.js在bower中被标记为main。 json 配置文件。

我想要实现的是文件结构如下:

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

我将非常感谢您的帮助!

Answer 1

Go through gulp-flatten, this will help you to remove or replace relative path for files. And also, I highly recommend wiredep. It automatically handles all of your bower dependencies for you, as well as the order of the dependencies. Hope this will help you.

包含 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 如果作为负数传入，它将在输出中包含底层父级的数量。