2016-04-20

VS2015 NPM GRUNT Minify notes

1. Download and install node.js (NPM)

https://nodejs.org/en/

































2. In VS2015, your project, add package.json file



























3. Edit package.json (VS2015 supports intellisense for this file, amazing~) I use this only for CSS and Javascript Minify






















4. Save the file, VS2015 will auto download the files, you can see the progress from OUTPUT window, after installing, files will be stored in node_modules folder


5. Add gruntfile.js file



























6. Edit the file and save
























7. Right-click gruntfile.js, execute Task Runner Explorer









































8. In Task Runner Explorer, right-click uglify and Run
















9. Files are compressed and bundle into one file (in this case, the final file is test/test.js)


10. Above steps are for Javascript files, for CSS file, it's similar, here is the complete content of gruntfile.js










































11. About the "watch"
Every time we modify a JS or CSS file, we need to manually generate the bundle file again, well, that's too stupid, so we use "watch" here.
In Task Runner Explorer, right-click watch, Bindings->Project Open

























Alright, from now on, once any JS or CSS file been modified,  it auto generate the final bundle file for you.