So what is Grunt?
Grunt is a task-based command line build tool for JavaScript projects.
If you are in the .NET world you may have written some bat files to automate some task, e.g copy some files from one directory to the other. Or have used Psake or MSBuild
|
1 2 3 |
@echo off xcopy C:\source\*.txt C:\target exit |
And if you come from the Ruby world then you may been using rake, in C and C++ Makefile or Java ant or maven. Basically Grunt is just like those tools that allow you to automate tasks.
A sample Makefile
|
1 2 3 4 5 |
CC=gcc CFLAGS=-I. hellomake: hellomake.o hellofunc.o $(CC) -o hellomake hellomake.o hellofunc.o -I. |
Ok great, I get the point Makefile, good for blah blah, now what can I do with using Grunt tool you are talking about?
Be patient, grasshopper. Let say you need to minify your JavaScript, run JSHint on your code, running some mocha tests after changes in your files, or reload node express server, or package your plugin etc, that is where Grunt comes in, and gives you a hand to automate things. Just like your MSBuild that helps you compile your code to helloworld.exe
So what is Grunt good for?
- To automate task for you
- To build small to large projects
- To deploy code
- To run your web server
Installing Grunt
We will install the Grunt CLI, this will install the command line utility globally. Grunt is broken into separate packages, by installing grunt-cli it does not automatically install grunt for us, all it does is allow us to use the command-line interface. In a typical workflow the CLI is installed once per system (i.e globally like below), and grunt is installed once per project.
|
1 |
npm install grunt-cli -g |
Now lets create our own sample project and initialize npm in it, so that it creates package.json file for us.
|
1 2 3 |
mkdir MyFirstGruntProject cd MyFirstGruntProject npm init |
Now that we have that in place we will install grunt as a development dependency.
|
1 2 3 4 5 6 7 |
npm install --save-dev grunt cat package.json //in the output one will see "devDependencies": { "grunt": "^0.4.5" } |
Now if we type in grunt in the command we will see an error.
A valid Gruntfile could not be found. Please see the getting started guide for
more information on how to configure grunt: http://gruntjs.com/getting-started
Fatal error: Unable to find Gruntfile.
What we need to do is create a file called Gruntfile.js, so lets create a file in our directory, and have a hello world message registered for our default task
|
1 2 3 4 5 |
module.exports = function(grunt) { grunt.registerTask('default', function() { grunt.log.writeln("Hello world grunt"); }); }; |
Now when we run grunt we will have an output
Running “default” task
Hello world grunt
Done, without errors.
Summary
We have covered installing and using Grunt in a very simple “hello world” way, in my next blog I will cover Visual Studio 2013 task runner tool that allows you to run grunt task inside of Visual Studio, and I will cover more in details of using grunt.
Leave A Comment