Front-End Automation
with Grunt
Belén Albeza
@ladybenko
www.belenalbeza.com

Friday, 25 October 13
A workflow example
Lint

Test
Open
browser

Watch
assets
Friday, 25 October 13

Compile
assets
Run
server
Recompile
assets
...
We do this already…
• python -m SimpleHTTPServer
• open index.html
• sass --watch sass:css
• jshint main.js
• ./conquer_th...
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 t...
Friday, 25 October 13
Grunt
Friday, 25 October 13
What is Grunt?
• A JavaScript task runner
npm install -g grunt-client
• Lots of plugins for front-end and Node
development...
Gruntfile.js
• A JavaScript file with our Grunt config
• Think of it as a Makefile, Rakefile, etc.
• We can use plugins that pr...
module.exports(function (grunt) {
[‘a-cool-grunt-plugin’,
‘another-plugin’
].forEach(grunt.loadNpmTasks);
grunt.initConfig...
How to run tasks
•

grunt mytask will run all the targets of

•

grunt mytask:target will run the specific

mytask
target o...
Linter
• A Linter analyses our code
• Looks for syntax errors (awesome for
script languages)

• Looks for formatting error...
Install JSHint plugin
• npm install grunt-contrib-jshint
• grunt jshint

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

Friday, 25 October 13
Sass
• CSS, as a language, sucks
• Sass is a nice language that compiles to CSS
• We have variables, inheritance/mixins, a...
@import _reset
$main-color: #cff
$fg-color: #000
@mixin std-button
background: $main-color
color: $fg-color
a.button, butt...
Install Sass plugin
• npm install
• grunt sass

Friday, 25 October 13

grunt-contrib-sass
grunt.initConfig({
sass: {
dev: {
options: {
style: ‘expanded’,
lineComments: true
},
files: {
‘css/main.css’: ‘sass/main....
// 1-to-1 file mapping. Ex:
// sass/unicorn.sass -> css/unicorn.css
files: {
expand: true,
cwd: ‘sass’,
src: [‘**/*.sass’]...
Watch
• You may have several daemons listening for
changes to files to do something

• Examples: Sass/LESS stylesheets,

Co...
Install Watch plugin
• npm install
• grunt watch

Friday, 25 October 13

grunt-contrib-watch
grunt.initConfig({
watch: {
sass: {
files: [‘sass/**/*.sass’],
tasks: [‘sass:dev’]
}
}
});

Friday, 25 October 13
Build your own flows
• You can create tasks than run other tasks
• Use them to set-up workflows, like “regular
development” ...
grunt.registerTask(‘server’, [‘clean’,
‘jshint’, ‘sass:dev’, ‘jasmine’,
‘connect:server’, ‘open’, ‘watch’]);
grunt.registe...
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 ...
grunt.registerTask(‘version’,
‘shows version number’, function () {
// implement our own task
var pkg = grunt.file.readJSO...
Other useful plugins
• grunt-contrib-clean: deletes files and

directories (usefull for temporary files)

• grunt-contrib-ja...
Browse more plugins
• http://gruntjs.com/plugins
• There are plugins to minify CSS, reload a
browser tab, create zips, era...
Sample code
https://github.com/
belen-albeza/grunt-demo

Friday, 25 October 13
Demo

Friday, 25 October 13
A different use case
• This is just not only for front-end or Node
development...

• Think of other projects you can autom...
A book!

Friday, 25 October 13
A book in Leanpub
• Leanpub is a publishing platform
• You write your manuscripts in Markdown
(plain text) and put them in...
Problem
• You need to put your manuscript files in
Dropbox…

• …but I want my own version control in
Github…

• …and I have...
Grunt to the rescue
Lint sample
code
Convert
from Github
MD to
Leanpub MD

Friday, 25 October 13

Zip sample
code
Copy MD
...
More about Grunt
• Grunt’s official “Getting Started Guide”
www.gruntjs.com/getting-started

• How to create your own tasks...
Thanks!
Questions?

@ladybenko
Friday, 25 October 13
Upcoming SlideShare
Loading in …5
×

Front-end development automation with Grunt

4,793 views

Published on

Introduction to Grunt, a JavaScript task runner

Published in: Technology

Front-end development automation with Grunt

  1. 1. Front-End Automation with Grunt Belén Albeza @ladybenko www.belenalbeza.com Friday, 25 October 13
  2. 2. A workflow example Lint Test Open browser Watch assets Friday, 25 October 13 Compile assets Run server Recompile assets Reload browser
  3. 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. 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. 5. Friday, 25 October 13
  6. 6. Grunt Friday, 25 October 13
  7. 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. 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. 9. module.exports(function (grunt) { [‘a-cool-grunt-plugin’, ‘another-plugin’ ].forEach(grunt.loadNpmTasks); grunt.initConfig({ // ... }); }); Friday, 25 October 13
  10. 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. 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. 12. Install JSHint plugin • npm install grunt-contrib-jshint • grunt jshint Friday, 25 October 13
  13. 13. grunt.initConfig({ jshint: { all: [‘Gruntfile.js’, ‘js/**/*.js’] } }); Friday, 25 October 13
  14. 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. 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. 16. Install Sass plugin • npm install • grunt sass Friday, 25 October 13 grunt-contrib-sass
  17. 17. grunt.initConfig({ sass: { dev: { options: { style: ‘expanded’, lineComments: true }, files: { ‘css/main.css’: ‘sass/main.sass’ } } } }); Friday, 25 October 13
  18. 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. 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. 20. Install Watch plugin • npm install • grunt watch Friday, 25 October 13 grunt-contrib-watch
  21. 21. grunt.initConfig({ watch: { sass: { files: [‘sass/**/*.sass’], tasks: [‘sass:dev’] } } }); Friday, 25 October 13
  22. 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. 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. 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. 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. 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. 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. 28. Sample code https://github.com/ belen-albeza/grunt-demo Friday, 25 October 13
  29. 29. Demo Friday, 25 October 13
  30. 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. 31. A book! Friday, 25 October 13
  32. 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. 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. 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. 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. 36. Thanks! Questions? @ladybenko Friday, 25 October 13

×