How To Create A Build System With NPM Scripts



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.

If you enjoyed this tutorial, make sure to subscribe to our Youtube Channel and follow us on Twitter @pentacodevids for latest updates!

Filed under: Intermediate Javascript Tooling

About the Author

Posted by

I like to build things, and like it even more when others find them useful. Founder of @pentacovids and @boredawake. Follow me on Twitter @whyzhi

Related Posts

Webdev News

Loading...
    More News