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 | |

Solution 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.