Gulp + Bower - How to import Bower installed components for my final project

Question

I’m starting to manage my components with Bower and I’m having a question:

I use Gulp to perform tasks like compiling my Less files, concatenating Avascripts, only how Bower components get inside the bower_components do not know how I can organize the gulpfile.js of my own project to import the files that the components use without needing much manual work.

Is there any paradigm of organization / import of such components?

I hope I’ve been clear. Thank you.

Answer 1

I don’t use Bower, but the Gulp allows you to designate more than one path to fetch the files where tasks will be performed, so you could do something like:

// gulpfile.js
// ...

gulp.task('minha-task', function() {
    return gulp.src(['path/meus/scripts/*.js', 'path/bower_components/**/*.js'])
        .minhasTasks() //...
});

The line:

return gulp.src(['path/meus/scripts/*.js', 'path/bower_components/**/*.js'])

calls an array (in this case, with 2 paths) and will run your task on any file found within these two locations.

Note that I added ** in the path where the imported components with Bower would be, because this way even if they are divided by subfolders, Gulp would still be able to identify them and run their files .js.

Answer 2

You can create a task to copy a particular file to the desired destination. In the case of JS, you can also use Gulp-Concat to concatenate all JS files and in the final project have only one.js file with all concatenated and minified.