image

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.

  • 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..