What is grunt.js
Grunt is a task runner. It runs tasks that you ask it to run.
In short: it automates tedious actions so that you don't have to do them manually.
The way I see it is like having my own personal intern :)
Basically
It can: image resizing, croping, optimizing assets, compiling stuff, etc.
But it's also much more: create dynamic websites that will compile into static builds, run test suites, lint and hint your code, live-reload your app, run a nodejs server with phantomjs, etc.
--
Hint: take a look at Yeoman (http://yeoman.io/) to
get a sense of how powerfull Grunt can be.
Qwhat?
The designers will better understand
if they see Grunt as a photoshop action.
Grunt, via the Terminal, is just a tiny tool that
helps enable this sorts of #automated #bliss.
The PM will better understand it as a way
to make more money by working faster.
Also, it helps preserve the front-end devs' sanity.
Win-win-win-win.
how does grunt work
Before we jump into the example project, you should know that:
-
Grunt runs on nodejs, so you need that.
-
You should install Grunt (and it's CLI) through npm
-
You should have a package.json file to declare your dependencies
- You will need a Gruntfile.js to tell Grunt what to run and how.
What is node and npm
Very quickly, Nodejs is a platform
(a server-side framework) built in javascript.
So it will use that language instead of ruby to execute its tasks.
Like Gems for Rails, npm is node's package system
which are basically like plugins that you can use in the framework.
what is package.json
This file lists all the dependencies needed
to run a given application or website.
This allows developers to easily manage versions and do upgrades.
It very is similar to the Gemfile.
{
"name": "my-project-name", // project name
"version": "0.1.0", // version name
"devDependencies": { // dependencies list with versions
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.3.3",
"grunt-contrib-uglify": "~0.4.0"
}
}
Dependencies will be 'bundled' in the project using:
what is the gruntfile
This file is the link between the plugins (dependencies) loaded in package.json and their execution.
This is where we are gonna list all our tasks and point them to the right assets
and assign a command so that they can be ran and chained.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Task commands
grunt.registerTask('my-task-name', ['uglify']);
how can i run grunt
To run a Grunt task (or a series of),
you must use the follow command in the terminal:
'my-task' is of course declared and configured in the Gruntfile.
This command needs to be called in the same folder as the Gruntfile.
Simple right ?
Show me that project, by the beard of Zeus!
what's next?
In the Rails ecosystem, we need to find
a nice and clean way to automate Grunt tasks,
especially for deployment purposes.
This is opened for discussion!