Grunt workflow POC

1. Create Project on GitHub

1. https://github.com/eshacker/grunt-and-minify-poc

2. Clone and use node

1. git clone git@github.com:eshacker/grunt-and-minify-poc.git && nvm use node

1. it clones the repo first.
2. it uses nvm to load node.
3. nvm is node version manager.
4. You probably would require to use https-url version instead of git-url for cloning.

2. cd into the directory.

3. npm init
4. mkdir src && cd src && mkdir css && mkdir js && touch index.html && cd ..
5. git add . && git commit -m "Structure of the example application." && git log -n1

1. You should see "Structure of the example application." as the last line of the output due to git log -n1

6. Fill up src/index.html, src/js/index.js, src/css/index.less

1. use any data.
2. get the app working.

7. Install grunt via node package manager

1. Read http://gruntjs.com/getting-started 
2. npm install -g grunt-cli
3. verify as follow

1. grunt --version should print grunt-cli v0.1.13 where v0.1.13 is variable and might be different for you.

8. install grunt plugin for uglifying JS.

1. https://github.com/gruntjs/grunt-contrib-uglify
2. install with

1. npm install grunt-contrib-uglify --save-dev

3. Check status by running

1. git status
2. You should see a change in package.json file and a directory node_modules created in the root of the repo.

4. Create a .gitignore file in the root of the directory and add

1. on a line

1. node_modules/

5. Now check git status again, you shouldn’t see node_modules.

1. you though will see a .gitignore file.

6. Create a Gruntfile.js

1. Get the basic configuration from  http://gruntjs.com/getting-started
2. update the structure using your head.

7. add this to Gruntfile.js

1. grunt.loadNpmTasks('grunt-contrib-uglify');

8. git add . && git commit -m “working js uglifier”
9. You probably want to

1. npm install grunt --save-dev

10. Check for output using

1. grunt
2. You should see a build/ or dist/ directory in root of repo if everything is going right.
3. Otherwise just follow the error.

9. Convert your CSS files to LESS files
10. Install grunt contrib less

1. https://github.com/gruntjs/grunt-contrib-less
2. npm install grunt-contrib-less --save-dev
3. add this to Gruntfile.js

1. grunt.loadNpmTasks('grunt-contrib-less');

4. Make changes as you wish.
5. Use compress option.

11. save changes in git repo.
12. Minify and copy html pages.

1. Install

1. npm install grunt-contrib-htmlmin --save-dev

2. Update Gruntfile.js

1. grunt.loadNpmTasks('grunt-contrib-htmlmin');

13. Of course you need to add htmlmin and less to the default task list and command grunt.
14. This POC/sample is complete. Time Taken: 2 hours 40 minutes.