How To Create A Build System With NPM Scripts

Share:



Source Code

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.

Get latest web dev stories straight to your inbox

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.

Comments Or Questions? Discuss In Our Discord

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

You Might Also Like