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:
- 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.
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,
) 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": “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"”
- 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..