CODEWITHSUNDEEP
backbone.jsgulp
Michael Joseph Aubry
Michael Joseph Aubry

Reputation: 13422

Getting bower and gulpjs to work nicely together?

Using gulpjs and bower, Id like to start with the bower.json file to call on what package dependencies I want (ideally start the build with html 5 boilerplate, then backbone). Since the whole point of using gulp is for easy project management I would like to understand how to auto insert the scripts in to my project (pulling from the bower_components dir) and add the path to my head tags, I assume this is a responsibility gulp should be handling, in the link below I am under the impression grunt does provide this functionality, so if grunt can gulp should be able to.

This tut seems to cover everything I am looking for, except it is using gruntjs with the plugin "grunt-bowercopy" http://simonsmith.io/managing-bower-components-with-grunt/

So does anyone know how to get gulp and bower to play nicely. It would be cool to download the html 5 boilerplate, then for my javascript include backbone/jquery as well as some css like fontawesome and such with one command bower update, and have it insert the script tags in my header, and pull the main files I need into my project (this would kill a lot of tedious work). I assume grunt does handle this specifically with the "grunt-bowercopy" plugin, so essentially I am looking for a plugin "gulp-bowercopy" or something that provides this?

I still have a lot to learn about gulp/grunt and how to really leverage them, but this seems like an awesome tool to have.

Upvotes: 0

Views: 3592

Answers (2)

jonkemp
jonkemp

Reputation: 86

You can just use wiredep directly like the gulp Yeoman generator does. Here's a code sample from the gulpfile.js.

var wiredep = require('wiredep').stream;

gulp.task('wiredep', function () {
    gulp.src('app/styles/*.scss')
        .pipe(wiredep({
            directory: 'app/bower_components',
            ignorePath: 'app/bower_components/'
        }))
        .pipe(gulp.dest('app/styles'));

    gulp.src('app/*.html')
        .pipe(wiredep({
            directory: 'app/bower_components',
            ignorePath: 'app/'
        }))
        .pipe(gulp.dest('app'));
});

Upvotes: 1

Mangled Deutz
Mangled Deutz

Reputation: 11403

essentially I am looking for a plugin "gulp-bowercopy" or something that provides this

You should then consider looking into either:

as they likely provide the same functionality as grunt-bowercopy.

Upvotes: 2

Related Questions