Posted on

task automation inside package.json with npm-scripts

Last week I found an interesting blog about replacing grunt/gulp with npm-scripts that inspired me to try this approach. And write a blog about this struggle.



As the author said, the motivation for this is mainly about 3 categories of issues:


  • Dependence on plugin authors
  • Frustrating debugging
  • Disjointed documentation

So far I was using gulp tasks, but encountered same problems. I was also frustrated from broken dependencies, gulp-style syntax or the need of separating gulp config file with package.json file.


Examples of some npm-scripts

all our commands are in package.json inside one object under the “scripts” key. These npm-scripts are run as a command-line operations therefore you have to install necessary commands.


Compilers for coffeescripts and cjsx could be easily googled, installed and then used. The same way you just put this command inside the particular key-value. For example:

This way, running command npm run coffee will find all .coffee codes in src folder and concanate their compiled version inside dist/app-coffee.js file. The -o option will compile the JavaScript without the top-level function safety wrapper.

Cjsx will practically do the same work. As I notices, cjsx will compile also .coffee files and therefore it could completely substitute coffee compiler. The additional -w option watches for changes.



Uglify is one of possibility to parse/compress/beautify js code.

will turn our app.js code into app.min.js code


running server

For client server one could use http-server command. And this is a npm-script for this:



Onchange is one of the examples of helpers that brings a little logic to npm-scripts. It will watch for a change of given file/folder and run another command. For example, as uglify does not have watcher (or I did not found any), onchange will substitute this option:

This way, changes in dist/app.js will run uglify script defined above.



This is something I was not able to work with gulp off. Inside npm script it looks much easier:

This scripts will reload the browser after any change in dist folder. But still, you need to load index directly into browser tab to get the url starting with “file://“.



The last thing to do is to combine our scripts. You can run a script from another script by npm run anotherScript. There are also some prepared operators. This is listed copied from another blog post:

  • && for chaining tasks
  • & for running tasks simaltaneously
  • < for inputting the contents (stdin) of a file to a command
  • > for redirecting output (stdout) of a command and dumping it to a file
  • | for redirecting output (stdout) of a command and sending it to another command

Theoretically joining npm-scripts would be possible by joining them by & operator, but set watchers did some problems in my case. Then I found module parallelshell:

Now, npm start will run all listed scripts in separated shells.


Leave a Reply