javascript grunt安装和使用

浏览数：25 / 时间：2015年06月08日

grunt是javascript世界的构建工具。

为何要用构建工具？
一句话：自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等。自动化工具可以减轻你的劳动，简化你的工作。当你正确配置好了任务，任务运行器就会帮你自动完成大部分无聊的工作。

为什么要使用Grunt？

Grunt生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用Grunt自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那就自己动手创造一个Grunt插件，然后将其发布到npm上吧。

通过npm安装：

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

官网教程：

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 to use sudo (for OSX, *nix, BSD etc) or run your command shell as Administrator (for Windows) to do this.

npm install -g grunt-cli

This will put the grunt command in your system path, allowing it to be 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 has been installed next to a Gruntfile. This allows multiple versions of Grunt to be installed on the same machine simultaneously.

How the CLI works

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

If a locally installed Grunt is found, the CLI loads the local installation of the Grunt library, applies the configuration 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 has been installed and that the project has already been configured with apackage.json and a Gruntfile, it‘s very easy to start working with Grunt:

Change to the project‘s root directory.
Install project dependencies with npm install.
Run Grunt with grunt.

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

Preparing a new Grunt project

A typical setup will involve adding two files to your project: package.json and the Gruntfile.

package.json: This file is used by npm to store metadata for projects published as npm modules. You will list grunt and the Grunt plugins your project needs as devDependencies in this file.

Gruntfile: This file is named Gruntfile.js or Gruntfile.coffee and is used to configure or define tasks and load Grunt plugins. When this documentation mentions a Gruntfile it is talking about a file, which is either a Gruntfile.js or a Gruntfile.coffee.

package.json

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

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

Most grunt-init templates will automatically create a project-specific package.json file.
The npm init command will 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 way to add Grunt and gruntplugins to an existing package.json is with the commandnpm install <module> --save-dev. Not only will this install <module> locally, but it will automatically be added to the devDependencies section, using a tilde version range.

For example, this will install the latest version of Grunt in your project folder, adding it to your devDependencies:

npm install grunt --save-dev

The same can be done for gruntplugins and other node modules. Be sure to commit the updatedpackage.json file with your project when you‘re done!

The Gruntfile

The Gruntfile.js or Gruntfile.coffee file is a valid JavaScript or CoffeeScript file that belongs in the root directory of your project, next to the package.json file, and should be committed with your project source.

A Gruntfile is comprised of the following parts:

The "wrapper" function
Project and task configuration
Loading Grunt plugins and tasks
Custom tasks

An example Gruntfile

In the following Gruntfile, project metadata is imported into the Grunt config from the project‘spackage.json file and the grunt-contrib-uglify plugin‘s uglify task is configured to minify a source file and generate a banner comment dynamically using that metadata. When grunt is run on the command line, theuglify task will be 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‘]);

};