GRUNTJS Introduction and Install

What is GruntJS?

Grunt is a task runner. This means that it's a tool that run tasks.

SURE BUT WHAT KIND OF TASK?

Task that Front-End developers are often told to do.

• Work with small chunks of CSS and JavaScript and then concatenate it for production.
• Compress CSS and minify Javascript.
• Use Sass and other precompiled.

All these mentioned "tasks" are vital for website development these days. And Grunt help you to get things done, more effectively.

Grunt runs on Node.js

You don't have to know how Node works, like PHP with wordpress.

Ok so what I need to use Grunt?

As I explained, Node is required. If you have followed this project until now, you probably have Node already installed because it is a requirements to use Jekyll.

INSTALL NODE

Otherwise visit the Node website and download and install it from there.

GRUNT CLI INSTALL COMMAND

This line will install on your system the Grunt CLI (Command line interface), a terminal interface that allow you to use GruntJS in your projects. npm install -g grunt-cli

That's what makes the grunt command in the terminal work.

Once you have installed the Grunt CLI you are ready to use Grunt.

PACKAGE & NPM INSTALL

Grunt is installed on a per-project basis. So in your project folder you need to create a package.json at the root level.

The package.json file should be this:

{
	"name": "example-	project",
	"version": "0.1.0",
	"devDependencies": {
		"grunt": "~0.4.1"
	}
}

With that file Node manage our dependencies. Node handles that dependencies through a package manager called NPM which stands for Node Package Manager.

After the creation of that package.json navigate to your project folder, in the terminal, and run the command:

npm install

This command will create a new folder, called node_modules, in your project folder.

This was our last command, now you have successfully installed Grunt into your project.