Front-end development automation with Grunt

Front-End Automation with Grunt

Belén Albeza@ladybenko

www.belenalbeza.com

Friday, 25 October 13

http://www.belenalbeza.com

http://www.belenalbeza.com

A workflow example

Lint Test

Run server

Open browser

Compile assets

Watch assets

Recompile assets

Reload browser


We do this already…

• python -m SimpleHTTPServer

• open index.html

• sass --watch sass:css

• jshint main.js

• ./conquer_the_world.sh

• Etc.


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



GruntFriday, 25 October 13

What is Grunt?

• A JavaScript task runnernpm 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 provide common tasks…

• …or we can cook our own tasks!


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 mytask

• grunt mytask:target will run the specific target of mytask

grunt cleangrunt sass:dev


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”)


Install JSHint plugin

• npm install grunt-contrib-jshint

• grunt jshint


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


Sass

• CSS, as a language, sucks

• Sass is a nice language that compiles to CSS

• We have variables, inheritance/mixins, a clean syntax, partials...


@import _reset

$main-color: #cff$fg-color: #000

@mixin std-button background: $main-color color: $fg-color a.button, button +std-button


Install Sass plugin

• npm install grunt-contrib-sass

• grunt sass


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


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


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


Install Watch plugin

• npm install grunt-contrib-watch

• grunt watch


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


• 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


grunt.registerTask(‘server’, [‘clean’, ‘jshint’, ‘sass:dev’, ‘jasmine’, ‘connect:server’, ‘open’, ‘watch’]);

grunt.registerTask(‘release’, [‘clean’, ‘jshint’, ‘sass:prod’, ‘jasmine’, ‘copy:release’]);


• 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


grunt.registerTask(‘version’,‘shows version number’, function () {

// implement our own task var pkg = grunt.file.readJSON( ‘package.json’); grunt.log.writeln(pkg.version);

});


• 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


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


http://gruntjs.com/plugins

http://gruntjs.com/plugins

Sample code

https://github.com/belen-albeza/grunt-demo






Demo


A different use case

• This is just not only for front-end or Node development...

• Think of other projects you can automate!


A book!


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


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


Grunt to the rescue

Lint sample code

Zip sample code

Copy MD files to

Dropbox

Convert from Github

MD to Leanpub MD


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


http://gruntjs.com/getting-started

http://gruntjs.com/getting-started

http://gruntjs.com/creating-tasks




http://www.leanpub.com/grunt

http://www.leanpub.com/grunt

Thanks!Questions?

@ladybenkoFriday, 25 October 13

Technology

Front-end development automation with Grunt