Grunt

Lightning Talk about Grunt (gruntjs.com)

Transcript

1. About Grunt and how to use it
2. ABOUT #ME • WebDev @smartive GmbH • Passionate Frontend Developer • Software Engineering Student @zhaw Winterthur
3. OVERVIEW • Basic Installation and NPM • Plugin Installation and Embedding it into a task • Create your own Tasks
4. ABOUT GRUNT
5. WHAT CAN YOU DO WITH IT? • Create building tasks
 - Minify images
 - Precompile templates
 - Minify JS-Files
 - Deployment • Execute development tasks
 - Watch code changes and react on it
 - Build CSS from SASS/LESS
 - Execute unit tests
6. SETUP CLI $ npm install -g grunt-cli
7. PACKAGE.JSON { "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.5" } }
8. INSTALL DEPENDENCIES $ npm install http://gruntjs.com/plugins
9. ADD DEPENDENCY $ npm install grunt —save-dev
10. GRUNTFILE.JS • Task Configuration (JSON) • Task Registration and Inclusion
11. TASK CONFIGURATION • Configuration node has the same name as the task name
12. BASIC TASK REGISTRATION grunt.registerTask(‘taskname’, ’description’, myFunction); • Register a task which executes a bunch of subtasks
13. TASK REGISTRATION • Register a task which executes a bunch of subtasks grunt.registerTask('default', ['watch']); • Execute with grunt taskname
14. MULTITASK REGISTRATION • Accessing a configuration node grunt watch:foo • Execute with grunt
15. FURTHER FEATURES • Project Scaffolding
 - Building custom project structures
16. TIME TO RUN YOUR TASKS