Gulp和Bower--创建适当的文件结构 [英] Gulp and Bower - creating proper files structure

问题描述

我将Bower加入到已经使用Gulp的项目中。我的文件夹结构如下所示：

I'm adding Bower to project which is using Gulp already. My folder structure is like:

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

我已经设法复制所有第三方libreries使用 main-bower-files 和 bower-normalize 。但它变平了（并且我没有将bower-normalize选项 flatten 设置为true！），所以它看起来像：

I have already managed to copy all 3rd party libreries to target/js using main-bower-files and bower-normalize. But it's flatten (and I didn't set bower-normalize option flatten to true!), so it's looks like:

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

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

我想要实现的文件结构如下所示：

What I would like to achieve is to have files structure like:

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

我会非常乐于帮忙！

推荐答案

浏览 gulp-flatten ，
这将帮助您删除或替换文件的相对路径。还有
，我强烈建议
wiredep 。它会自动为您
处理您的所有bower依赖关系，以及依赖关系的
顺序。希望这会对你有所帮助。

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.

源组目录： b

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

使用gulp-flatten - p>

Using 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, 1] If passes as array of two numbers, both parents from top and bottom will be kept in resulting path of a file.

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

includeParents: 1 If passed in as positive number, it will include the number of top-level parents in the output.

includeParents：-1 如果作为负数传入，它将在输出中包含底层父代的数量。

includeParents: -1 If passed in as negative number, it will include the number of bottom-level parents in the output.

这篇关于Gulp和Bower--创建适当的文件结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！