Gulp and Bower - creating proper files structure

Question

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!

It might be helpful to show your gulpfile.js file, that way someone can help you with the syntax. — srussking, Dec 08 '16 at 22:13

Varsha · Accepted Answer · 2016-12-11T01:48:33.810

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.

Gulp and Bower - creating proper files structure

1 Answers1

Linked