Automate npm and bower install with grunt

Question

I have a node / angular project that uses npm for backend dependency management and bower for frontend dependency management. I\'d like to use a grunt task to do both install co

Answer 1

To install client side components during npm install at the same time than server side libs, you can add in your package.json

"dependencies": {
    ...
    "bower" : ""
},
"scripts": {
    ...
    "postinstall" : "bower install"
}

I prefer to make the difference between install and test/build

Answer 2

FYI, here is where i am for now.

You could also have taken the problem another way, i.e. let npm handle the execution of bower, and ultimately let grunt handle npm. See Use bower with heroku.

grunt.registerTask('install', 'install the backend and frontend dependencies', function() {
    var async = require('async');
    var exec = require('child_process').exec;
    var done = this.async();

    var runCmd = function(item, callback) {
        process.stdout.write('running "' + item + '"...\n');
        var cmd = exec(item);
        cmd.stdout.on('data', function (data) {
            grunt.log.writeln(data);
        });
        cmd.stderr.on('data', function (data) {
            grunt.log.errorlns(data);
        });
        cmd.on('exit', function (code) {
            if (code !== 0) throw new Error(item + ' failed');
            grunt.log.writeln('done\n');
            callback();
        });
    };

    async.series({
        npm: function(callback){
            runCmd('npm install', callback);
        },
        bower: function(callback){
            runCmd('bower install', callback);  
        }
    },
    function(err, results) {
        if (err) done(false);
        done();
    });
});

Answer 3

You need to tell grunt that you're using an async method (.exec) by calling the this.async() method, getting a callback, and calling that when exec is done.

This should work:

module.exports = function(grunt) {
    grunt.registerTask('install', 'install the backend and frontend dependencies', function() {
        var exec = require('child_process').exec;
        var cb = this.async();
        exec('bower install', {cwd: './frontend'}, function(err, stdout, stderr) {
            console.log(stdout);
            cb();
        });
    });
};

See Why doesn't my asynchronous task complete?

Answer 4

Grunt task that does just this job (as per Sindre's solution above):

https://github.com/ahutchings/grunt-install-dependencies

Answer 5

Grunt task that does the bower install command : https://github.com/yatskevich/grunt-bower-task

also , you can use https://github.com/stephenplusplus/grunt-bower-install

to auto inject your dependencies into the index.html file