front-end development automation with grunt
DESCRIPTION
Introduction to Grunt, a JavaScript task runnerTRANSCRIPT
![Page 1: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/1.jpg)
Front-End Automation with Grunt
Belén Albeza@ladybenko
www.belenalbeza.com
Friday, 25 October 13
![Page 2: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/2.jpg)
A workflow example
Lint Test
Run server
Open browser
Compile assets
Watch assets
Recompile assets
Reload browser
Friday, 25 October 13
![Page 3: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/3.jpg)
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
![Page 4: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/4.jpg)
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
![Page 5: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/5.jpg)
Friday, 25 October 13
![Page 6: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/6.jpg)
GruntFriday, 25 October 13
![Page 7: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/7.jpg)
What is Grunt?
• A JavaScript task runnernpm install -g grunt-client
• Lots of plugins for front-end and Node development
Friday, 25 October 13
![Page 8: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/8.jpg)
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
![Page 9: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/9.jpg)
module.exports(function (grunt) { [‘a-cool-grunt-plugin’, ‘another-plugin’ ].forEach(grunt.loadNpmTasks); grunt.initConfig({ // ... });});
Friday, 25 October 13
![Page 10: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/10.jpg)
How to run tasks
• grunt mytask will run all the targets of mytask
• grunt mytask:target will run the specific target of mytask
grunt cleangrunt sass:dev
Friday, 25 October 13
![Page 11: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/11.jpg)
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
![Page 12: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/12.jpg)
Install JSHint plugin
• npm install grunt-contrib-jshint
• grunt jshint
Friday, 25 October 13
![Page 13: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/13.jpg)
grunt.initConfig({ jshint: { all: [‘Gruntfile.js’, ‘js/**/*.js’] }});
Friday, 25 October 13
![Page 14: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/14.jpg)
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
![Page 15: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/15.jpg)
@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
![Page 16: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/16.jpg)
Install Sass plugin
• npm install grunt-contrib-sass
• grunt sass
Friday, 25 October 13
![Page 17: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/17.jpg)
grunt.initConfig({ sass: { dev: { options: { style: ‘expanded’, lineComments: true }, files: { ‘css/main.css’: ‘sass/main.sass’ } } }});
Friday, 25 October 13
![Page 18: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/18.jpg)
// 1-to-1 file mapping. Ex:// sass/unicorn.sass -> css/unicorn.cssfiles: { expand: true, cwd: ‘sass’, src: [‘**/*.sass’], dest: ‘css’, ext: ‘.css’});
Friday, 25 October 13
![Page 19: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/19.jpg)
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
![Page 20: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/20.jpg)
Install Watch plugin
• npm install grunt-contrib-watch
• grunt watch
Friday, 25 October 13
![Page 21: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/21.jpg)
grunt.initConfig({ watch: { sass: { files: [‘sass/**/*.sass’], tasks: [‘sass:dev’] } }});
Friday, 25 October 13
![Page 22: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/22.jpg)
• You can create tasks than run other tasks
• Use them to set-up workflows, like “regular development” or “build a release”.
Build your own flows
Friday, 25 October 13
![Page 23: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/23.jpg)
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
![Page 24: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/24.jpg)
• 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 ;)
Create your own tasks
Friday, 25 October 13
![Page 25: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/25.jpg)
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
![Page 26: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/26.jpg)
• 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
Other useful plugins
Friday, 25 October 13
![Page 27: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/27.jpg)
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.)…
• And our Firefox OS grunt plugin! :)npm install grunt-firefoxos
Friday, 25 October 13
![Page 28: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/28.jpg)
Sample code
https://github.com/belen-albeza/grunt-demo
Friday, 25 October 13
![Page 29: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/29.jpg)
Demo
Friday, 25 October 13
![Page 30: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/30.jpg)
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
![Page 31: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/31.jpg)
A book!
Friday, 25 October 13
![Page 32: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/32.jpg)
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
![Page 33: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/33.jpg)
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
![Page 34: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/34.jpg)
Grunt to the rescue
Lint sample code
Zip sample code
Copy MD files to
Dropbox
Convert from Github
MD to Leanpub MD
Friday, 25 October 13
![Page 35: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/35.jpg)
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
![Page 36: Front-end development automation with Grunt](https://reader035.vdocuments.site/reader035/viewer/2022081717/54c739374a79590c6e8b47ad/html5/thumbnails/36.jpg)
Thanks!Questions?
@ladybenkoFriday, 25 October 13