Have you ever required gulp or grunt or something similar to be installed globally to be able to build a web project? You probably require npm as well? And possibly bower?

Having these kinds of global requirements is not healthy, nor is it very helpful. It’s much harder to get started with a project if there are many steps you have to follow, just to get all the requirements installed.

Global installs might not be the right version all the time either. If you don’t update, your local build might differ from the CI or even prod build.

There is a much better way that don’t require as much set up for a new dev environment.

npm

What if you could just use npm for everything? The only thing you really need is node and npm (which usually comes with node.js anyways). The great answer here is npm scripts.

I have recently moved gulp, karma and protractor away from my required installs in my Extreme Results app (which I wrote about here: Learning Web Dev Series – Part 5: Extreme Results). These things are now provided when running “npm install”.

The way to still be able to run all your gulp tasks and whatnot, is by using npm scripts. For example, instead of doing

gulp serve

to build, set up watchers and server, you could just do

npm start

In package.json:

"scripts": {
    "start": "gulp serve"
}

Easy and nice!

Npm has a couple of script names that can be used without writing “run” in front of them, like start and test. For other words, you have to do it like this:

npm run script_name

More information about npm scripts can be found here: https://docs.npmjs.com/misc/scripts

These are the scripts I have right now:

"scripts": {
    "clientdep": "bower install --no-interactive",
    "start": "gulp",
    "test": "gulp tdd",
    "selenium": "webdriver-manager update && webdriver-manager start",
    "e2e": "protractor protractor.conf.js"
},

These can be run like this:

Installs all extra dependencies (from bower, since I am still using that, for now):

npm run clientdep

Build, watchers (automatically reload) and serve (local webserver for development):

npm start

Run unit tests with watchers (automatically rereun tests):

npm test

Update web drivers and start a selenium server for protractor to use:

npm run selenium

Run e2e tests with protractor

npm run e2e

Follow me on Twitter: @gjermundbjaanes