I love SASS, and I love having the ability to minify my JS files so they’ll load faster when someone opens my website.

How about having a tool that allows you to:

• auto generate minified CSS files from your SASS

• auto combine CSS/JS files into 1 file (in case you have Compass or some other CSS framework, this may be extremely handy)

• auto minify JS files

• auto Sprite generation (okay okay, that's Compass, but still)!

• make all this happen every time a CSS/JS file changes (!)

Now that’s some wicked automation!
in comes Grunt.

Grunt lets you automate your workflow, and it has some insane plugins built on top of it.

It’s requires NodeJS to be installed on your system, don't worry, no tinkering required.

Most of the automation is done by a single configuration file, the GruntFile.

The GruntFile basically lets Grunt know what plugins it should use, which files should be minified, and it's typically located in your main folder for static files (so it can direct to "js/", "css/", "img/" and so on).

Here’s an example for a complete GruntFile (from gruntjs.com):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
module.exports = function (grunt) {</p>
<p>    grunt.initConfig({</p>
<p>        pkg: grunt.file.readJSON('package.json'),</p>
<p>        concat: {</p>
<p>            options: {</p>
<p>                separator: ';'</p>
<p>            },</p>
<p>            dist: {</p>
<p>                src: ['src/**/*.js'],</p>
<p>                dest: 'dist/&lt;%= pkg.name %&gt;.js'</p>
<p>            }</p>
<p>        },</p>
<p>        uglify: {</p>
<p>            options: {</p>
<p>                banner: '/*! &lt;%= pkg.name %&gt; &lt;%= grunt.template.today(&quot;dd-mm-yyyy&quot;) %&gt; */\n'</p>
<p>            },</p>
<p>            dist: {</p>
<p>                files: {</p>
<p>                    'dist/&lt;%= pkg.name %&gt;.min.js': ['&lt;%= concat.dist.dest %&gt;']</p>
<p>                }</p>
<p>            }</p>
<p>        },</p>
<p>        watch: {</p>
<p>            files: ['&lt;%= jshint.files %&gt;'],</p>
<p>            tasks: ['jshint', 'qunit']</p>
<p>        }</p>
<p>    });</p>
<p>    grunt.loadNpmTasks('grunt-contrib-uglify');</p>
<p>    grunt.loadNpmTasks('grunt-contrib-watch');</p>
<p>    grunt.loadNpmTasks('grunt-contrib-concat');</p>
<p>    grunt.registerTask('default', ['concat', 'uglify']);</p>
<p>};</p>

As you can see here, we’re using the concat plugin to join the different js files,
then we’re using the uglify plugin, to minify the files, and finally we use the watch plugin
to watch for file changes.

There are lots of other plugins, such as Compass (for SASS compilation) & LESS (for LESS compilation, duh), you can also validate your code, and do some testing.

If you want to take some good hours off your weekly load, and also be the cool guy around the block (sidenote: this would only work if your block has over 90% dev population).

I think Grunt really simplifies things that otherwise would require a developer to only work on automation for a few weeks, and make such a robust system that can be implemented across all projects.

The community is very solid, and development is incredibly active, check out Grunt on Github.

It’s very well documented and you can get most of what you need up and running in a matter of a few hours (at worst). It even supports concurrency!

Do your developers a favor, install it now.