Gulp to combine bower files

Question

I'm aware this has probably been asked before, but I can't seem to be able to ask Google the right questions to find what I need. So I'm possibly thinking about this in the wrong way.

Basically, I need to know if there is a way to use Gulp with Bower so that all css files in subdirectories under bower_components are combined into one styles.css, all js files in subdirectories under bower_components are combined into one scripts.js. Kind of how assetic works in symfony2 to combine assets into single files. Does each 'built' file in each bower_componets subdirectory have to be linked to manually (in the Gulp config file), or is it more common to loop through them programatically?

Thanks

Answer 1

Something like the below was what I was looking for, except I don't like having to add the paths manually. This is why I prefer something like CommonJS for Javascript. I definitely remember seeing a way in which CSS files were picked up automatically from the bower_components folder, I believe it was in the Wordpress Roots project (based on the settings/overrides in bower.json).

gulp.task('css', function () {

    var files = [
        './public/bower_components/angular-loading-bar/build/loading-bar.css',
        './public/bower_components/fontawesome/css/font-awesome.css'
    ];

    return gulp.src(files, { 'base': 'public/bower_components' })
               .pipe(concat('lib.css'))
               .pipe(minifyCss())
               .pipe(gulp.dest('./public/build/css/')
    );
});

gulp.task('js-lib', function () {
    var files = [
        'public/bower_components/jquery/dist/jquery.js',
        'public/bower_components/bootstrap-sass/assets/javascripts/bootstrap.js'
    ];


    return gulp.src(files, { 'base': 'public/bower_components/' })
               .pipe(sourcemaps.init())
               .pipe(uglify({ mangle: false }))
               .pipe(concat('lib.js'))
               .pipe(sourcemaps.write('./'))
               .pipe(gulp.dest('./public/build/js/')
    );
});