How I build my assets pipeline on Windows using NodeJS

I develop on Windows 10 (currently) with NodeJS, I am assuming you are running both already. Below is a bare-bones list of modules i use:

• browserify – this allows my to write my JavaScript in the NodeJS convention as well as concatenate multiple JavaScript dependencies like jQuery and GSAP.
• uglify-js – this will allow me to minify all my javascript code and dependencies.
• watchify – will give give us the ability to monitor my javascript files for any changes.
• node-sass – SASS compiler without having to know or setup Ruby. THis also compresses the output CSS code.
• nodemon – monitor our scss files for any changes.
• concurrently – will allow us to run multiply npm command concurrently on Windows using one terminal window.

Some optional modules I use are:
jquery and, bootstrap-sass.

Now we initialize our project with the following commands

• mkdir public – this will be my webroot folder. This will be the destination folders (public/assets/css,
  public/assets/js

  ) for the output files nodeJS will generate for us.

• mkdir client – this will where my source files will be
• npm init – create a package.json file for our project
• npm i <module_name> -D – this is how I install the node modules i need. the -D option will put the module in our package.json as a dependency.

once all the the modules I need are installed, I openup my package.json file and write the scripts I will be using to monitor and compile my CSS and JS files. The gist is to output 2 files bundle.js and bundle.css where all dependencies and custom code are concatenated into one file respectively and compressed.

 "scripts": {
   "build-js": “browserify client/index.js | uglifyjs -o public/assets/js/bundle.js”,
   "watch-js": “watchify client/index.js -do public/assets/js/bundle.js”,
   "build-css": “node-sass –output-style compressed –include-path client/scss client/index.scss public/assets/css/bundle.css”,
   "watch-css": “nodemon -e scss -x "npm run build-css"”,
   "build-assets": “concurrently –kill-others "npm run build-js" "npm run build-css"”,
   "watch-assets": “concurrently –kill-others "npm run watch-js" "npm run watch-css"”
 },

• build-js – will read my index.js file which is my main node javascript file and concatenate and minify all the custom code and dependencies into my production bundle.js file.
• watch-js – will monitor any changes on my index.js file then automatically compile it.
• build-css– will compile all my scss files and compress it into one bundle.css file. I also included a folder where I put my other scss snippet files.
• watch-css – this will monitor all .scss files specified in the watch-css command then run build-css once changes are saved on any of the files.
• build-assets– will build my js and css files
• watch-assets – will monitor my scss and js files and compile them once changes have been made.

Once I have this setup, i simply do npm run-watch-assets while I am developing to automatically compile all my assets on the files while I code. It’s a great time saver and cleans up my code a whole lot, especially since I only have to include 1 .js file and .css file in my html files for all the dependencies and plugins i use..