Grunt: The Node Developer's Sidekick

Transcript

2. what is it?
3. grunt. awesome sidekick automating the mundane stuff for you. you. awesome crime fighting node.js developer.
4. for realz, dude. what is it?
5. grunt: a utility to automate common, tedious development tasks, with a rich ecosystem of plug-ins to support it.
6. For example, Grunt can... • restart your node.js server upon saving • automatically concatenate + minify your js/css upon saving • automatically compile your sass/less/stylus to css upon saving • refresh your web browser for you upon saving • automatically run jslint on your code • automatically run tests
7. ...and just about any other task you might want something else to do for you (except write your unit tests for you... yet)
8. let’s grunt! grunt express demo
9. • Configure it ◦ Gruntfile.js ▪ Tasks ▪ Plugins ▪ Configuration • Run it ◦ grunt ◦ grunt task ◦ grunt task:target The Grunt Way
10. • Single Gruntfile.js file • Resides in base directory ◦ along side your package.json, Gemfile, etc. • File defines the behavior of Grunt for you project through tasks Configuring Grunt
11. • Written as a Node Module (CommonJS) • Exports one function that accepts a single “grunt” parameter • Three main components ◦ Configuration: grunt.initConfig(config) ◦ Plugins: grunt.loadNpmTasks(pluginName) ◦ Tasks: grunt.registerTask(name, def) Gruntfile.js Architecture
12. Tasks • Defines what type of things grunt can do • Normally maps to one specific job ◦ e.g. Compile stylus to css upon saving • You can write up a custom task yourself • More commonly, you can use a pre-built tasks from the grunt ecosystem • Most tasks (especially pre-built ones) have options that can be configured ◦ e.g. Compile all .styl files in /stylus to *.css in /public/assets/css
13. Loading Pre-Built Tasks • Pre-built tasks ship as NPM modules • Install a pre-built task (via NPM) ◦ e.g. npm install grunt-contrib-uglify --save-dev • Loading it in Gruntfile.js ◦ grunt.loadNpmTasks(‘grunt-contrib-uglify’); • Once loaded, its available for “registering”
14. • grunt.registerTask(‘name’, [‘task’, ...]) • “name” allows user to name task(s) • “name” used to reference task/group of tasks • Special “default” name ◦ When registering under “default” these tasks will be called when calling “grunt” without params ◦ grunt.registerTask(‘default’, [‘uglify’]) Registering Tasks
15. Registering Multi Tasks • Grunt support “Multi Tasks” • Multi Tasks are like normal tasks except they can have multiple “targets” • E.g. “concat” used to concat css and js files ◦ Wouldn’t want concat them together though ◦ We set up separate targets: one js and one css • Registered via registerMultiTask with the same syntax of registerTask
16. Custom Tasks • Grunt supports registering custom tasks • Defined using same registerTask syntax • Replace the “tasks” array with a callback • After defining, can be used just the same as a NPM loaded task
17. demo-tasks custom task demo
18. Configuring Tasks • Most tasks require configurations • Configuration for all tasks happens in one place – grunt.initConfig(config) • Config is an Object literal • Config is broken up into ◦ Regular Tasks {“task”: { … } ◦ Multi Tasks {“task”: “targets”: { … }}
19. • Within tasks/targets, common patterns: ◦ options – define any custom options available to the task... will change from task to task ◦ src, dest, files – ways to specify files the task will work with... supports globbing and filtering ◦ filter – filter out source files based on callback • Config support template strings ◦ e.g. option: { name: “<%= foo.name %>” }} Configuring Tasks
20. grunt.initConfig({ concat: { // task sample: { // target options: { // options banner: '/* <%= baz %> */\n', }, filter: 'isFile', // filter out non-files src: ['<%= qux %>', 'baz/*.js'], // ['foo/*.js', 'baz/*.js'] dest: 'build/<%= baz %>.js', // 'build/abcde.js' }, }, // Arbitrary properties foo: 'c', bar: 'b<%= foo %>d', // 'bcd' baz: 'a<%= bar %>e', // 'abcde' qux: 'foo/*.js', });
21. demo-tasks custom task + config demo
22. Gruntfile.js Custom Task Definition (registerTask) Custom Task Definition (registerTask) Load Prebuilt Task (loadNpmTasks) Load Prebuilt Task (loadNpmTasks) Load Prebuilt Task (loadNpmTasks) Load Prebuilt Task (loadNpmTasks) Grunt Task Configuration (initConfig)
23. Running Grunt • Grunt comes with the grunt cli tool • From within our project directory can run ◦ grunt ▪ Will run any tasks we’ve registered under “default” ◦ grunt task ▪ Will run only tasks registered under “task” ▪ Will run all targets underneath “task” ◦ grunt task:target ▪ Will only run “target” underneath “task”
24. Helpful Grunt Stuff • grunt.log.* ◦ grunt.log.ok(“Write a pretty message”) ◦ grunt.log.error(“Write a scary error message”) • grunt.file.* ◦ Clean support for stuff like file name globbing • grunt.event.* ◦ EventEmitter like interface • grunt.util.* ◦ Handy utility helpers • See http://gruntjs.com/api
25. The Plugin Ecosystem • Grunt has rich ecosystem of plugins • Some provided by core team • Many contributed by 3rd parties • See http://gruntjs.com/plugins
26. But wait! There’s more!
27. Doesn’t stop with Node • No reason you can’t use Grunt with other languages, frameworks, non-code projects ◦ Auto compile restart a Go web server on save ◦ Have it convert your markdown files to pretty HTML or PDF on save and deploy it to a static web server ◦ Rebuild a visualization automatically when CSV file containing data is updated
28. The Yeoman Family • Grunt is part of a larger “Yeoman” family ◦ yo – project scaffolding (think rails generate) ◦ grunt – we just met ◦ bower – client side pkg mgmt (think front-end NPM) • Beyond scope of this talk • Definitely worth checking out • http://yeoman.io
29. Thanks • Nate Good • Twithub: @nategood • Web: http://nategood.com