In this three part live coding series, we will create a simple build system that compiles our SCSS files down to a single CSS output.  We will also leverage the power of Browserify to recursively bundle all our Javascript files into a single output.

The magic behind this system is the power of NPM Scripts, by adding the following to the scripts section of our package.json file:

"scripts": {
    "build-css": "node-sass --include-path scss scss/main.scss build/css/style.min.css",
    "build-js": "browserify js/**.js > build/js/script.min.js",
    "build": "npm run build-css && npm run build-js",
    "server": "cd build && python -m SimpleHTTPServer 8000",
    "start": "nodemon -e js,scss -x \"npm run build && npm run server\" --ignore build/"
}

It will allow us to run our build system with a simple npm start command.  It then starts PythonHttpSimpleServer as the web server, and nodemon to watch over any changes we make to our SCSS and JS files.

Resources:

• Node Package Manager (NPM): package manager for JavaScript. Find, share, and reuse packages of code from hundreds of thousands of developers — and assemble them in powerful new ways.
• nodemon: a utility that will monitor for any changes in your source and automatically restart your server. Perfect for development.
• node-sass: a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.
• browserify: Browserify lets you require(‘modules’) in the browser by bundling up all of your dependencies.
• Python SimpleHTTPServer: Starts a simple server to serve static content at the current folder.