Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Similar to Intro to grunt
Similar to Intro to grunt (20)
Recently uploaded
Recently uploaded (17)
Intro to grunt
- 2. 2 A JavaScript Tasks Runner Uglify JS/CSS Compile Jade/SASS/Coffeescript HTML hint A lot more to explore… CSS sprite Intro to Grunt
- 3. Install $ sudo npm install -g grunt-cli (1)Based on NodeJS $ grunt - - version 3 “cli” stands for “Command Line Interface”
- 4. (2)Depended on 2 Files 1. package.json $ npm install 4
- 5. 2. gruntfile.js (2)Depend on 2 Files 5
- 8. Demo 1: Uglify JS package.json $ npm install OR $ npm install grunt-contrib-uglify - -save-dev 8
- 9. gruntfile.js dest src(array) Demo 1: Uglify JS 9 :
- 10. OR $ grunt uglify gruntfile.js $ grunt default Demo 1: Uglify JS 10 $ grunt
- 13. Demo 2: Adding watch package.json $ npm install OR $ npm install grunt-contrib-watch - -save-dev 13
- 14. gruntfile.js Src tasks $ grunt watch Demo 2: Adding watch Let’s watch it! 14
- 16. Demo 3: add matchdep package.json $ npm install OR $ npm install matchdep - -save-dev 16
- 17. gruntfile.js Demo 3: add matchdep 17
- 18. Demo 3: add matchdep 18 load-grunt-tasks
- 19. Demo 3: compile coffee package.json $ npm install OR $ npm install grunt-contrib-coffee - -save-dev 19
- 20. Demo 3: compile coffee gruntfile.js dest: src Src tasks Let’s watch it! 20
- 21. $ grunt watch 21
- 22. CoffeeScript JavaScript uglified JS in one step! 22
- 23. Demo 4: compile coffee to uglified gruntfile.js Customtasknamehere Let’s watch it! $ grunt watch 23
- 24. main.js 24 Demo 4: compile coffee to uglified
- 25. Demo 5: compile sass package.json $ npm install OR $ npm install grunt-contrib-sass - -save-dev $ npm install grunt-contrib-cssmin - -save-dev 25
- 26. gruntfile.js dest: src Demo 5: compile sass 26
- 27. $ grunt watch Demo 5: compile sass Let’s watch it! 27 is also called “multi tasks”
- 28. Demo 5: compile sass 28
- 29. 29
- 30. Configuring Tasks: tasks $ grunt uglify $ grunt coffee Tasks 30
- 31. Configuring Tasks: targets targets tasks $ grunt sass:dist $ grunt sass:build $ grunt sass 31
- 33. Configuring Tasks: files Compact Format 33
- 34. files object Format Configuring Tasks: files 34
- 35. files array Format Configuring Tasks: files 35
- 36. Configuring Tasks: 36 custom filter function fs.Stats method name
- 39. gruntfile.js Templates Demo: Uglify JS 39
- 41. Thanks Again! 41