The Build Process

These days JavaScript is overloaded with tooling (we’re even guilty of throwing our hat into the ring with pliers), but remembering this is a “simple” website, I’m going to steer clear of any build tool in this article, and I would suggest you do too.

As an aside, I’m not just leaving build tools out of this article because they’re overkill for this small demo, I take this approach on any project I’m getting started with. My method with most software is to ignore it, try to get by without it, and only to reach for it if I identify a specific problem that it can solve well.

If your build process becomes unwieldy, a tool like grunt, gulp or pliers can help to organise things. But equally (especially with grunt and gulp) their configuration and setup can be equally unwieldy, and significantly bewildering.

Replace the scripts section of your package.json with the following:

{ "build-css": "stylus source/stylesheets/index.styl -o static/css", "watch-css": "stylus source/stylesheets/index.styl -o static/css -w", "clean": "rm -rf static/css && mkdir -p static/css", "build": "npm run clean && npm run build-css", "watch": "npm run clean && npm run watch-css & nodemon server -e js,jade", "start": "node server" }

Note: if you’re on Windows, the clean task needs to use different path separators…

rm -rf static\\css && mkdir -p static\\css

Thanks to Timothy Trowbridge for pointing this out.

I’ll explain each command in detail. The reason to put them in the package.json ; is simply to give them aliases. The benefits are three-fold: npm allows you to use locally installed modules without typing node_modules/.bin ; you don’t have to remember how to type the entire command each time; and it means that you can freely change the contents of the command (you could, for example, change the build-css command to use Sass instead of Stylus, and nobody else on your team would need to know – they continue building their css blissfully unaware).

Running commands is simple: npm run <name>

npm run build-css – this uses the Stylus CLI to compile the index.styl stylesheet to css, and place it in the static/css directory

– this uses the Stylus CLI to compile the index.styl stylesheet to css, and place it in the static/css directory npm run watch-css – this is exactly the same as the previous command, except that it will continue running until manually stopped, compiling the stylesheet any time the source files are change. This task essentially supersedes the stylus middleware I mentioned earlier.

– this is exactly the same as the previous command, except that it will continue running until manually stopped, compiling the stylesheet any time the source files are change. This task essentially supersedes the stylus middleware I mentioned earlier. npm run clean – this removes any built files (currently only css, but it might later include browserify-ed JS) and creates any required directories.

– this removes any built files (currently only css, but it might later include browserify-ed JS) and creates any required directories. npm run build – this does everything required for the server to run correctly, which is just to run the clean and build-css commands

– this does everything required for the server to run correctly, which is just to run the clean and build-css commands npm run watch – this is the command that is most useful in development. It will watch the entire project for changes and recompile assets or restart the server accordingly.

– this is the command that is most useful in development. It will watch the entire project for changes and recompile assets or restart the server accordingly. npm run start – this simply starts the server and does no watching at all.

There was one additional dependency introduced here – nodemon. It does a great job at watching files and restarting on change, so install it like so: