I'm starting to manage my components with Bower and I have a question:
I use Gulp to perform tasks such as compiling my less files, concatenating javascripts, but since the Bower components are inside the bower_components I do not know how I can organize the gulpfile.js from my own project to import the files that the components use without much manual labor.
Is there any organization / import paradigm for such components?
I hope I have been clear. Thank you.
I do not use Bower, but Gulp allows you to designate more than one path to fetch the files where tasks will run, 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 those two locations.
Note that I added ** to path where the imported components would be with Bower, because even if they are divided by subfolders, Gulp would still be able to identify them and run their files .js .
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 everything concatenated and minified.