View
131
Download
0
Category
Tags:
Preview:
DESCRIPTION
Introduction to Grunt, a JavaScript task runner
Citation preview
Front-End Automation with Grunt
Belén Albeza@ladybenko
www.belenalbeza.com
Friday, 25 October 13
A workflow example
Lint Test
Run server
Open browser
Compile assets
Watch assets
Recompile assets
Reload browser
Friday, 25 October 13
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
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
Friday, 25 October 13
GruntFriday, 25 October 13
What is Grunt?
• A JavaScript task runnernpm install -g grunt-client
• Lots of plugins for front-end and Node development
Friday, 25 October 13
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
module.exports(function (grunt) { [‘a-cool-grunt-plugin’, ‘another-plugin’ ].forEach(grunt.loadNpmTasks); grunt.initConfig({ // ... });});
Friday, 25 October 13
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
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
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 clean syntax, partials...
Friday, 25 October 13
@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
Install Sass plugin
• npm install grunt-contrib-sass
• grunt sass
Friday, 25 October 13
grunt.initConfig({ sass: { dev: { options: { style: ‘expanded’, lineComments: true }, files: { ‘css/main.css’: ‘sass/main.sass’ } } }});
Friday, 25 October 13
// 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
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
Install Watch plugin
• npm install grunt-contrib-watch
• grunt watch
Friday, 25 October 13
grunt.initConfig({ watch: { sass: { files: [‘sass/**/*.sass’], tasks: [‘sass:dev’] } }});
Friday, 25 October 13
• 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
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
• 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
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
• 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
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
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 automate!
Friday, 25 October 13
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 into a shared folder in Dropbox
• Then, they build a pretty eBook from your plain text files
Friday, 25 October 13
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
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
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
Thanks!Questions?
@ladybenkoFriday, 25 October 13
Recommended