Jan
26
2016
by eidam

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.

 

Motivation

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.

.coffee/.cjsx

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

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

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.

 

livereload

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://“.

 

parallelshell

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.