Gulp和Bower - 创建适当的文件结构

时间:2016-12-01 08:45:25

标签: javascript gulp bower main-bower-files

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

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

我已设法使用main-bower-filesbower-normalize将所有第三方libreries复制到target / js。但是它已经变平了(我没有将bower-normalize选项flatten设置为true!),所以它看起来像:

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

文件lib1.jsextra.jslib2.js在bower.json配置文件中标记为main

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

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

我会非常乐意帮助你!

1 个答案:

答案 0 :(得分:1)

  

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

您的bower组件源目录:

php artian migrate:refresh --seed

使用gulp-flatten -

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

将创建此结构(从树目录上方):

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