Gulp find my Bower components and concat them

Question

I have a stupid question, I guess: I'm trying to make a Gulp task, that find my Bower components (let's say, in the default bower_components folder) and concatene them to a single file (ie js/libs.js) when I install a new component.

I tried to use main-bower-files to achieve that, based on examples on the documentation :

gulp.task('jslibs', function() {
 return gulp.src(mainBowerFiles()) // SyntaxError: Unexpected end of input
        .pipe(concat('libs.js'))
        .pipe(uglify())
        .pipe(gulp.dest('js'))
});

So it's returning a syntax error when I run the task, I don't know why. I tried to pass some options, no success.

Any ideas ?

Answer 1

I didn't find a solution using main-bower-files . So I tried another package : bower-files ( require('bower-files')(); ).

And the working task look like this :

gulp.task('js-libs', function() {    
   gulp.src(lib.ext('js').files)
    .pipe(concat('libs.js'))
    .pipe(uglify())
    .pipe(gulp.dest('js'));
});

It just takes all the files set as dependencies in Bower and returns it. Then I concat / uglify and send it to my JS build folder (and then, the main JS task is watching for changes and add it to the main JS file, concat / uglify it and send it to the dist.

Answer 2

First install your requirements:

npm install gulp gulp-concat main-bower-files -D

Then your gulpfile.js could look like:

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    mainBowerFiles = require('main-bower-files'),

gulp.task('bower', function() {
    return gulp.src(mainBowerFiles('**/*.css' ,{debugging:true}))
        .pipe (concat ("vendor.js"))
        .pipe(gulp.dest("./app/js/vendor/"));
});

Then just do:

gulp bower

Answer 3

I had the same problem. This might be the issue. You do not have a bower.json file or you have an empty .bowerrc file