3. We do this already…
• python -m SimpleHTTPServer
• open index.html
• sass --watch sass:css
• jshint main.js
• ./conquer_the_world.sh
• Etc.
4. What if we integrate all
these tasks?
• We can setup long flows and run it with
just one task
• We can stop the flow if a task fails (for
instance, abort when linting spots an error)
• Everyone in the dev team can follow the
same workflow
7. What is Grunt?
• A JavaScript task runner
npm install -g grunt-cli
• Lots of plugins for front-end and Node
development
8. Gruntfile.js
• A JavaScript file with our Grunt config
• Think of it as a Makefile, Rakefile, etc.
• We can use plugins that provide common
tasks…
• …or we can cook our own tasks!
10. How to run tasks
•
grunt mytask will run all the targets of
•
grunt mytask:target will run the specific
mytask
target of mytask
grunt clean
grunt sass:dev
11. Linter
• A Linter analyses our code
• Looks for syntax errors (awesome for
script languages)
• Looks for formatting errors (ex: “don’t use
more than 80 chars per line!”)
• Looks for bad practises (ex: “you can’t use
this variable without declaring it first”)
14. Sass
• CSS, as a language, sucks
• Sass is a nice language that compiles to CSS
• We have variables, inheritance/mixins, a
clean syntax, partials...
19. Watch
• You may have several daemons listening for
changes to files to do something
• Examples: Sass/LESS stylesheets,
CoffeeScript files, Handlebars templates,
etc.
• With Grunt you can group all of them in a
single place
24. Create your own tasks
• If you don’t find the right plugin, you can
create your very own task…
• …and wrap it in a plugin so others can use
it as well ;)
26. Other useful plugins
• grunt-contrib-clean: deletes files and
directories (usefull for temporary files)
• grunt-contrib-jasmine: run Jasmine tests
from the console and in the browser
• grunt-contrib-copy: copy files (useful to
make builds)
• grunt-contrib-connect: run a local server
27. Browse more plugins
• http://gruntjs.com/plugins
• There are plugins to minify CSS, reload a
browser tab, create zips, erase files, build
assets (Handlebars, Coffee, LESS, etc.)…
OS grunt plugin!
• And our Firefoxgrunt-firefoxos:)
npm install
32. A book in Leanpub
• Leanpub is a publishing platform
• You write your manuscripts in Markdown
(plain text) and put them into a shared
folder in Dropbox
• Then, they build a pretty eBook from your
plain text files
33. Problem
• You need to put your manuscript files in
Dropbox…
• …but I want my own version control in
Github…
• …and I have other files (PSD’s, sample
code, etc.) that I don’t want to put into that
folder
34. Grunt to the rescue
Lint sample
code
Convert
from Github
MD to
Leanpub MD
Zip sample
code
Copy MD
files to
Dropbox
35. More about Grunt
• Grunt’s official “Getting Started Guide”
www.gruntjs.com/getting-started
• How to create your own tasks http://
gruntjs.com/creating-tasks
• “Power-Up Your Front-End Development
with Grunt” www.leanpub.com/grunt