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 commands. I haven't been able to figure out how to do it.

I made an attempt using exec, but it doesn't actually install anything.

module.exports = function(grunt) {

    grunt.registerTask('install', 'install the backend and frontend dependencies', function() {
        // adapted from http://www.dzone.com/snippets/execute-unix-command-nodejs
        var exec = require('child_process').exec,
            sys  = require('sys');

        function puts(error, stdout, stderr) { console.log(stdout); sys.puts(stdout) }

        // assuming this command is run from the root of the repo
        exec('bower install', {cwd: './frontend'}, puts);
    });

};

When I cd into frontend, open up node, and run this code from the console, this works fine. What am I doing wrong in the grunt task?

(I also tried to use the bower and npm APIs, but couldn't make that work either.)

i'm in the same kind of configuration, and would like to know how you run ```npm install```? the same way? or is there an other way? — xavier.seignard, Mar 07 '13 at 02:48

jsan · Answer 1 · 2015-09-04T08:45:33.947

134

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

edited Sep 04 '15 at 08:45

answered Sep 03 '13 at 11:54

jsan

2,794
2
18
25

10

most streamlined solution, and explicit separation of build and dev-setup concerns without adding additional grunt task aliases, or needing to add additional documentation to my project. this is awesome, thank you! – Conrad.Dean Jan 31 '14 at 20:13
3

most eggcellent ... squeaky clean – mynameistechno Apr 03 '14 at 01:18
2

So simple! so so so simple. This is by far the most elegant solution. Thanks – mtpultz Jun 26 '14 at 19:54
Any reason you have bower as a dependency and not a devDependency? – Patrick Nov 25 '14 at 05:52
@Patrick because I need to install browser dependencies in any environment. BTW I'm working on [Borrower](https://github.com/j-san/borrower) – jsan Nov 26 '14 at 08:44
While post-install hooks are usually an anti-pattern for node, I think that for this particular problem they are the perfect tool. +1 – Lenny Markus Feb 02 '15 at 06:02
2

`"postinstall" : "bower install"` would just work in this case too, because `node_modules/.bin` is added to `PATH` env variable. – Farid Nouri Neshat Mar 10 '15 at 12:24
@FaridNouriNeshat I don't think that would be the case on a hosted CI build server – Bart Calixto Sep 01 '15 at 19:15
1

npm adds it when running the scripts so it works everywhere – Farid Nouri Neshat Sep 02 '15 at 01:10

score 35 · Accepted Answer · edited Feb 15 '14 at 22:14

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?

score 7 · Answer 3 · edited Jan 08 '16 at 22:36

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();
    });
});

score 2 · Answer 4 · answered May 12 '13 at 13:15

2

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

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

answered May 12 '13 at 13:15

nostopbutton

424
5
13

score 2 · Answer 5 · answered Jan 27 '14 at 10:04

2

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

answered Jan 27 '14 at 10:04

Itsik Avidan

1,681
1
12
7

Automate npm and bower install with grunt

5 Answers5

Linked