In this post we will see how it is possible to configure an entire build sequence using npm only.
npm run package should:
- clean our build folder
- compile our css from stylus
- compile our html from jade
Let’s assume our project is organized as follows:
|-- dist // Build will end up here
stylus src/stylus/site.styl --out dist/
Let’s set this up in the package.json: Read this post if you want to know the basics of setting up scripts in npm.
jade src --out dist/
In our package.json, we can now create the tow following scripts:
(Here is an introduction to browserify if needed)
The command to bundle our JS into one file is
browserify ./src/js/main.js -o ./dist/bundle.js
I am using uglifyJS2 for this task.
The task to minify the bundle.js file is
uglifyjs -- compress ./dist/bundle.js -o ./dist/bundle.min.js
Now what we want is to pipe the output of the browserify task into the uglify task so that we can combine both into one npm task
To do this, we are going to use a unix pipe
| and connect the STDOUT of the first task with the STDIN of the second.
browserify ./src/js/main.js | uglifyjs --compress > ./dist/bundle.min.js
Let’s set it up as a npm task:
Now let’s combine all our tasks in one npm
"package": "npm run package:stylus && npm run package:jade && npm run package:js"
This will run our 3 package tasks in a sequence.
npm run package to test the full build sequence.
Before running the build, we would like to clean the output directory.
We will use rimraf’s CLI like so:
Instead of creating another ‘package:clean’ task, we can use an npm script prehook. By prefixing an existing task (even custom) with pre or post, it will be automatically executed before or after our main task.
In our current project, if we create a task called
<b>pre</b>package it will be executed automatically before our
package task. In a similar way,
<b>post</b>package would be executed after
Our final task:
"prepackage": "rimraf dist/*"
and here is the final scripts object in he package: