Front End Development Automation with Grunt

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

A workﬂow example
Lint

Test
Open
browser

Watch
assets

Compile
assets
Run
server
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

What is Grunt?
• A JavaScript task runner
npm install -g grunt-cli
• 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

•

grunt mytask:target will run the speciﬁc

mytask
target of mytask
grunt clean
grunt 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 ﬁrst”)

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 sass

grunt-contrib-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.css
files: {
expand: true,
cwd: ‘sass’,
src: [‘**/*.sass’],
dest: ‘css’,
ext: ‘.css’
});

Watch
• You may have several daemons listening for
changes to ﬁles to do something

• Examples: Sass/LESS stylesheets,

CoffeeScript ﬁles, Handlebars templates,
etc.

• With Grunt you can group all of them in a
single place

Install Watch plugin
• npm install
• grunt watch

grunt-contrib-watch

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

Build your own ﬂows
• You can create tasks than run other tasks
• Use them to set-up workﬂows, like “regular
development” or “build a release”.

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

Create your own tasks
• If you don’t ﬁnd the right plugin, you can
create your very own task…

• …and wrap it in a plugin so others can use
it as well ;)

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

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

Browse more plugins
• http://gruntjs.com/plugins
• There are plugins to minify CSS, reload a
browser tab, create zips, erase ﬁles, build
assets (Handlebars, Coffee, LESS, etc.)…

OS grunt plugin!
• And our Firefoxgrunt-firefoxos:)
npm install

Sample code
https://github.com/
belen-albeza/grunt-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 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 ﬁles

Problem
• You need to put your manuscript ﬁles in
Dropbox…

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

• …and I have other ﬁles (PSD’s, sample

code, etc.) that I don’t want to put into that
folder

Grunt to the rescue
Lint sample
code
Convert
from Github
MD to
Leanpub MD

Zip sample
code
Copy MD
ﬁles to
Dropbox

More about Grunt
• Grunt’s ofﬁcial “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

Thanks!
Questions?

@ladybenko

Front End Development Automation with Grunt

More Related Content

What's hot

Viewers also liked

Similar to Front End Development Automation with Grunt

More from Ladies Who Code

Recently uploaded

Front End Development Automation with Grunt