Okay, so I’ve been hearing a lot about Grunt lately, and how it can automate a bunch of tedious tasks in my web development workflow. I finally decided to give it a shot, and let me tell you, it was a bit of a learning curve, but totally worth it. Here’s how I got it all set up and working.
Getting Started
First things first, I made sure I had * and npm (Node Package Manager) installed. You kinda need those to get anything done with Grunt. I just went to the * website and downloaded the installer. Super easy.
Next, I created a new folder for my project. Let’s call it, uh, “MyAwesomeProject”. Then, I opened up my command prompt (I’m on Windows, but it’s pretty much the same on Mac or Linux) and navigated to that folder using the cd command. You know, like cd MyAwesomeProject.
Setting Up the Project
Now, inside that folder, I needed two files: and . The file holds info about my project and the dependencies (like Grunt itself). The is where I tell Grunt what to do.
To create the , I ran npm init in the command prompt. It asked me a bunch of questions, I mostly just hit Enter to accept the defaults. You can customize it if you want, but I just wanted to get things rolling.
Then, I installed Grunt locally in my project. I ran: npm install grunt --save-dev. The --save-dev part is important because it adds Grunt as a development dependency in my . This means it’s only needed for development, not for the live website.
After installation completed.I installed the Grunt CLI globally on my machine. To make it can be used in any my project, I ran:npm install -g grunt-cli.
Creating the Gruntfile
Okay, this is where the magic happens. I created a new file called in my project folder. This file is a JavaScript file where you configure Grunt.
Inside the , I started with this basic structure:
* = function(grunt) {
// Project configuration.
pkg: *('*'),
// Load tasks
// Default task(s).
*('default', []);
This is like the skeleton of the Gruntfile. is where I define my tasks. pkg: *('*') lets me use info from my file in the Gruntfile (like the project name, version, etc.).
Installing and Configuring Plugins
Now, Grunt by itself doesn’t do much. You need plugins to do the actual work. I wanted to start with something simple, like minifying my CSS. So, I installed the grunt-contrib-cssmin plugin:
I ran: npm install grunt-contrib-cssmin --save-dev
Once it was installed, I went back to my and added the configuration for cssmin inside the block:
* = function(grunt) {
// Project configuration.
pkg: *('*'),
cssmin: {
target: {
files: {
'dist/css/*': ['src/css/.css']
// Load the plugin that provides the "cssmin" task.
*('grunt-contrib-cssmin');
// Default task(s).
*('default', ['cssmin']);
Let’s break this down:
cssmin: { ... }: This is the configuration for the cssmin plugin.
target: { ... }: I can have multiple targets (like different sets of files to minify), but here I just have one.
files: { ... }: This specifies the input and output files.
'dist/css/*': ['src/css/.css']: This means “take all the CSS files in the src/css/ folder, minify them, and save the result as in the dist/css/ folder.” I had to create those folders myself, by the way.
*('grunt-contrib-cssmin');: This loads the plugin so Grunt knows about it.
*('default', ['cssmin']);: This tells Grunt that when I run grunt in the command prompt (without specifying any task), it should run the cssmin task.
Running Grunt
Finally! I created a simple file in my src/css/ folder with some basic CSS. Then, I went back to my command prompt, made sure I was in my project folder (MyAwesomeProject), and ran:
grunt
Boom! Grunt did its thing, and I saw a new file in my dist/css/ folder, all nicely minified. Success!
Adding More Tasks
I then added another task, JavaScript minification, using the grunt-contrib-uglify plugin. It’s pretty much the same process:
Install the plugin: npm install grunt-contrib-uglify --save-dev
Load the plugin in : *('grunt-contrib-uglify');
Configure the task inside :
uglify: {
my_target: {
files: {
'dist/js/*': ['src/js/.js']
I also added uglify to be included by default.
*('default', ['cssmin', 'uglify']);
Now, when I run grunt, it minifies both my CSS and my JavaScript. I created a to test with just like the css test.
This is just the beginning, of course. There are tons of Grunt plugins out there for all sorts of things: concatenating files, running tests, optimizing images, you name it. It’s a really powerful tool once you get the hang of it. My next step is looking into grunt-contrib-watch to automatically run tasks whenever I change a file. That’ll be sweet!
