Skip to content

Navigation Menu

Sign in
Sign up

GRUNTJS Introduction and Install

Riccardo edited this page Aug 5, 2014 · 3 revisions

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.

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.

GRUNT CLI INSTALL COMMAND

Last command we have to run is:

npm install -g grunt-cli

This will install the Grunt CLI (Command line interface), that's what makes the grunt command in the terminal work.

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

Clone this wiki locally

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /