JavaScript Grunt Installation and use

Grunt is the building tool for the JavaScript world.

Why use build tools?
Word: Automation. For tasks that require repeated repetition, such as compression (Minification), compilation, unit testing, linting, and so on. Automated tools can ease your labor and simplify your work. When you properly configure the task, the task runner will help you do most of the boring work automatically.

Why use Grunt?

The grunt ecosystem is very large and growing. With a large number of plugins to choose from, you can use grunt to automate anything and spend the least amount of time. If you can't find the plugin you need, create a grunt plugin yourself and publish it to NPM.

Http://www.gruntjs.org/article/installing_grunt.html

Install via NPM:

Install grunt-cli globally with npm install -g grunt-cli .

Http://www.cnblogs.com/snandy/archive/2013/03/11/2949177.html

Official website Tutorial:

http://gruntjs.com/getting-started

Installing the CLI

Using Grunt 0.3? Please see Grunt 0.3 Notes

In order to get started, you'll want to install Grunt's command line interface (CLI) globally. You may need the use of sudo (for OSX, *nix, BSD etc) or run your command shell as Administrator (for Windows) to doing this.

npm install -g grunt-cli

This would put grunt the command in your system path, and allowing it to is run from any directory.

Note that installing grunt-cli does not install the Grunt task runner! The job of the Grunt CLI is simple:run the version of Grunt which have been installed next to a Gruntfile . This allows multiple versions of Grunt to being installed on the same machine simultaneously.

How the CLI works

Each time grunt was run, it looks for a locally installed Grunt using node ' s require() system. Because of this, you can run from any grunt subfolder in your project.

If a locally installed Grunt is found, the CLI loads the local installation of the Grunt library, applies the con Figuration from your Gruntfile , and executes any tasks you ' ve requested for it to run. To really understand what is happening, read the code.

Working with an existing Grunt project

Assuming that the Grunt CLI have been installed and that the project have already been configured with a package.json and a Gruntfile , I T ' s very easy-to-start working with Grunt:

1. Change to the project ' s root directory.
2. Install project Dependencies with npm install .
3. Run Grunt with grunt .

That's really all there are to it. Installed Grunt tasks can be listed by running but grunt --help it's usually a good idea to start with the project ' s Documentatio N.

Preparing a new Grunt project

A Typical setup would involve adding the files to your project: and the package.json Gruntfile .

Package.json: This file was used by NPM to the store metadata for projects published as NPM modules. You'll list grunt and the grunt plugins your project needs as devdependencies in this file.

gruntfile: This file is named Gruntfile.js or Gruntfile.coffee aD is used to configure or define tasks and load Grunt plugins< /c3>. When this documentation mentions a Gruntfile it's talking about a file, which is either a Gruntfile.js or a Gruntfile.coffee .

Package.json

package.jsonthe file belongs in the root directory of your project, next Gruntfile to the, and should is committed with your project Source. Running in the npm install same folder as a package.json file would install the correct version of each dependency listed therein.

There is a few ways to create a package.json file for your project:

• Most grunt-init templates would automatically create a project-specific package.json file.
• The NPM init command would create a basic package.json file.
• Start with the example below, and expand as needed, following this specification.

{  "name": "my-project-name",  "version": "0.1.0",  "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-jshint": "~0.10.0", "grunt-contrib-nodeunit": "~0.4.1", "grunt-contrib-uglify": "~0.5.0" }}

Installing Grunt and Gruntplugins

The easiest-to-add Grunt and gruntplugins to an existing are with the package.json command npm install <module> --save-dev . Not only would this install <module> locally, but it'll automatically is added to the Devdependencies section, using a tilde Version range.

For example, this would install the latest version of Grunt in your project folder and adding it to your devdependencies:

npm install grunt --save-dev

The same can is done with gruntplugins and other node modules. Be sure to commits the updated package.json file with your project when you ' re done!

The Gruntfile

Gruntfile.jsthe or Gruntfile.coffee file is a valid JavaScript or Coffeescript file that belongs in the root directory of your project, NEX T package.json to the file, and should is committed with your project source.

A is comprised of the Gruntfile following parts:

• The "wrapper" function
• Project and Task Configuration
• Loading Grunt Plugins and tasks
• Custom Tasks

An example Gruntfile

Gruntfilein the following, project metadata is imported to the Grunt config from the project ' s package.json file and the Grunt-cont Rib-uglify plugin ' s uglify task is configured to minify a source file and generate a banner comment dynamically using that Metadata. When grunt was run on the command line, the task would be a uglify run by default.

Module.exports =function(grunt) {//Project configuration.Grunt.initconfig ({Pkg:grunt.file.readJSON (' Package.json '), uglify: {options: {banner:‘/*! <%= pkg.name%> <%= grunt.template.today ("Yyyy-mm-dd")%> */\n '}, Build: {src:' Src/<%= pkg.name%>.js ', dest:' Build/<%= pkg.name%>.min.js '      }    }  }); //Load The plugin that provides the "Uglify" task.Grunt.loadnpmtasks (' grunt-contrib-uglify '); //Default Task (s).Grunt.registertask (' Default ', [' uglify ']);};

Read more about the documentation.

Bootstrap compiling CSS and javascript:

Bootstrap uses Grunt as the compilation system, and provides some handy methods for compiling the entire framework. The following is how to compile the source code, run test cases and other content.

Installing Grunt

Before installing Grunt, you need to first download and install node. JS (NPM is included). NPM is the abbreviation for node packaged modules, and its role is to manage the dependencies between the expansion packages based on node. js.

Then enter the following command on the command line:

1. Install in the Global Environment grunt-cli : npm install -g grunt-cli .
2. Go /bootstrap/ to the root directory and execute the npm install command. NPM will read the package.json file and automatically install any dependent expansion packs listed in this file.

Once the above steps are complete, you can run the various Grunt commands provided by Bootstrap.

JavaScript Grunt Installation and use