Introduction to Grunt, a JavaScript task runner

1. Front-End Automation
with Grunt
Belén Albeza
@ladybenko
www.belenalbeza.com
Friday, 25 October 13

2. A workflow example
Lint
Test
Open
browser
Watch
assets
Friday, 25 October 13
Compile
assets
Run
server
Recompile
assets
Reload
browser

3. We do this already…
• python -m SimpleHTTPServer
• open index.html
• sass --watch sass:css
• jshint main.js
• ./conquer_the_world.sh
• Etc.
Friday, 25 October 13

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
Friday, 25 October 13

5. Friday, 25 October 13

6. Grunt
Friday, 25 October 13

7. What is Grunt?
• A JavaScript task runner
npm install -g grunt-client
• Lots of plugins for front-end and Node
development
Friday, 25 October 13

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!
Friday, 25 October 13

9. module.exports(function (grunt) {
[‘a-cool-grunt-plugin’,
‘another-plugin’
].forEach(grunt.loadNpmTasks);
grunt.initConfig({
// ...
});
});
Friday, 25 October 13

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
Friday, 25 October 13

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”)
Friday, 25 October 13

12. Install JSHint plugin
• npm install grunt-contrib-jshint
• grunt jshint
Friday, 25 October 13

13. grunt.initConfig({
jshint: {
all: [‘Gruntfile.js’,
‘js/**/*.js’]
}
});
Friday, 25 October 13

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...
Friday, 25 October 13

15. @import _reset
$main-color: #cff
$fg-color: #000
@mixin std-button
background: $main-color
color: $fg-color
a.button, button
+std-button
Friday, 25 October 13

16. Install Sass plugin
• npm install
• grunt sass
Friday, 25 October 13
grunt-contrib-sass

17. grunt.initConfig({
sass: {
dev: {
options: {
style: ‘expanded’,
lineComments: true
},
files: {
‘css/main.css’: ‘sass/main.sass’
}
}
}
});
Friday, 25 October 13

18. // 1-to-1 file mapping. Ex:
// sass/unicorn.sass -> css/unicorn.css
files: {
expand: true,
cwd: ‘sass’,
src: [‘**/*.sass’],
dest: ‘css’,
ext: ‘.css’
});
Friday, 25 October 13

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
Friday, 25 October 13

20. Install Watch plugin
• npm install
• grunt watch
Friday, 25 October 13
grunt-contrib-watch

21. grunt.initConfig({
watch: {
sass: {
files: [‘sass/**/*.sass’],
tasks: [‘sass:dev’]
}
}
});
Friday, 25 October 13

22. Build your own flows
• You can create tasks than run other tasks
• Use them to set-up workflows, like “regular
development” or “build a release”.
Friday, 25 October 13

23. grunt.registerTask(‘server’, [‘clean’,
‘jshint’, ‘sass:dev’, ‘jasmine’,
‘connect:server’, ‘open’, ‘watch’]);
grunt.registerTask(‘release’, [‘clean’,
‘jshint’, ‘sass:prod’, ‘jasmine’,
‘copy:release’]);
Friday, 25 October 13

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 ;)
Friday, 25 October 13

25. grunt.registerTask(‘version’,
‘shows version number’, function () {
// implement our own task
var pkg = grunt.file.readJSON(
‘package.json’);
grunt.log.writeln(pkg.version);
});
Friday, 25 October 13

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
Friday, 25 October 13

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
Friday, 25 October 13

28. Sample code
https://github.com/
belen-albeza/grunt-demo
Friday, 25 October 13

29. Demo
Friday, 25 October 13

30. A different use case
• This is just not only for front-end or Node
development...
• Think of other projects you can automate!
Friday, 25 October 13

31. A book!
Friday, 25 October 13

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
Friday, 25 October 13

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
Friday, 25 October 13

34. Grunt to the rescue
Lint sample
code
Convert
from Github
MD to
Leanpub MD
Friday, 25 October 13
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
Friday, 25 October 13

36. Thanks!
Questions?
@ladybenko
Friday, 25 October 13