Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

what is it?

Slide 3

Slide 3 text

grunt. awesome sidekick automating the mundane stuff for you. you. awesome crime fighting node.js developer.

Slide 4

Slide 4 text

for realz, dude. what is it?

Slide 5

Slide 5 text

grunt: a utility to automate common, tedious development tasks, with a rich ecosystem of plug-ins to support it.

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

...and just about any other task you might want something else to do for you (except write your unit tests for you... yet)

Slide 8

Slide 8 text

let’s grunt! grunt express demo

Slide 9

Slide 9 text

● Configure it ○ Gruntfile.js ■ Tasks ■ Plugins ■ Configuration ● Run it ○ grunt ○ grunt task ○ grunt task:target The Grunt Way

Slide 10

Slide 10 text

● 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

Slide 11

Slide 11 text

● 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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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”

Slide 14

Slide 14 text

● 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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

demo-tasks custom task demo

Slide 18

Slide 18 text

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”: { … }}

Slide 19

Slide 19 text

● 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

Slide 20

Slide 20 text

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', });

Slide 21

Slide 21 text

demo-tasks custom task + config demo

Slide 22

Slide 22 text

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)

Slide 23

Slide 23 text

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”

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

The Plugin Ecosystem ● Grunt has rich ecosystem of plugins ● Some provided by core team ● Many contributed by 3rd parties ● See http://gruntjs.com/plugins

Slide 26

Slide 26 text

But wait! There’s more!

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Thanks ● Nate Good ● Twithub: @nategood ● Web: http://nategood.com