Gulp and Bower - creating proper files structure

问题

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

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

Files lib1.js, extra.js and lib2.js are marked as main in bower.json config file.

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

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

I will be really greatful for help!

回答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.

Your source directory with bower components:

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

Using gulp-flatten -

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

will create this structure (from above tree directory):

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

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 If passed in as positive number, it will include the number of top-level parents in the output.

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

来源：https://stackoverflow.com/questions/40906070/gulp-and-bower-creating-proper-files-structure

标签

javascript

gulp

bower

main-bower-files