Grunt 入门指南1

Getting started

Grunt 和 Grunt的插件都是通过npm来安装和管理滴。

Grunt 0.4.x 要求 Nodejs>=0.8.0。

安装CLI

如果你以前全局安装过Grunt, 需要先卸载掉

npm uninstall -g grunt

全局安装Grunt CLI，你可能需要使用sudo命令，或者使用管理员权限

npm install -g grunt-cli

执行了之后，grunt命令就在你的系统path里了，可以在任何目录里执行。

注意了～，装上了 grunt-cli 不代表就装上了grunt task runner!, grunt CLI的工作很简单：将某个版本的grunt安装到 Gruntfile的旁边。它还允许同时安装多个版本的grunt在同一台机器上。

CLI 是咋工作的

每次grunt执行的时候，都会先使用node的require()方法来查看本地安装的grunt. 基于此，你可以在你项目的任意子目录里执行grunt 命令

如果找到了本地安装的Grunt， CLI就载入本地安装的grunt库，并且使用Gruntfile里的配置，执行你需要运行的任何tasks。

在现有的grunt项目中如何工作

假设Grunt CLI已经安装并且项目已经配置好了package.json和Gruntfile, 开展工作就十分滴简单： 1. 定位到项目的根目录 2. 使用 npm install 安装项目依赖 3. 执行grunt

这就是所有的事情鸟！～已装的Grunt tasks 可以用grunt --help命令列出来。

打包一个全新的grunt项目

典型的项目设置是包含两个文件： packge.json 和 Gruntfile.

packge.json 文件用来让npm 安装项目依赖 Gruntfile 这个文件命名为 Gruntfile.js 或者 Gruntfile.coffee, 里面配置或定义了tasks以及需要载入的Grunt插件.

package.json //项目自动化所依赖的相关插件。
Gruntfile.js //项目自动化工作流配置文件，重要

package.json

package.json 放在项目的根目录下，并且应该被提交到源码中，执行在package.json同目录执行nom install,就会安装每个列在里面的依赖。

有几个方式可以创建package.json

使用 grunt-init 模块 http://gruntjs.com/project-scaffolding
执行 npm init 命令
自己写入下面的内容建一个

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.1.1",
    "grunt-contrib-nodeunit": "~0.1.2"
  }
}

安装Grunt 和 gruntplugins

通过 npm install (module) --save-dev命令把Grunt和runtplugins加入到已存在的package.json. 很方便。这并不只是安装(module) 到本地，而是使用tilde version range 自动加到 devDependencies 节后面。

有关 Gruntfile

Gruntfile.js 或者 Gruntfile.coffee 是一个有效的js或者coffeescript文件，放在你项目的根目录下，和package.json在一起，并且要被提交到项目的源码中去。

一个Gruntfile 有下面几部分组成: * "wrapper" 函数 * project和task配置 * 载入grunt plugins和tasks * 自定义的tasks

一个Gruntfile的例子

下面的Gruntfile中，项目的元数据package.json 被导入到grunt的配置中，grunt-contrib-uglify 插件的 uglify task 用来配置压缩源码以及使用该元数据动态产生一个banner注释。当grunt运行时，uglify task 将会默认执行.

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']);

};

现在你看到的是一个完整的Gruntfile, 下面让我们看看它的各个组件部分。

"wrapper" 函数

每个Gruntfile (和grunt plugin) 都使用这个基本格式，并且你的Grunt 代码必须放在这个函数里头:

module.exports = function(grunt) {
  // Do grunt-related things in here
};

Project 和 task 配置

大多数 Grunt tasks 通过 grunt.initConfig 定义一个对象当作配置数据。

在这个例子中, grunt.file.readJSON('package.json') 导入了package.json 的JSON元数据到grunt 的配置中。因为<% %> 模版字符可以引用任何配置的属性，所以配置的数据像文件路径和文件列表都可以用这个方式来避免重复。

你可以在配置对象里存任意数据，只要不和你的tasks必须的属性相冲突，否则将会被忽略掉。同样，因为这是js，你不必限制使用JSON，只要是有效的js都可以写在这里，你甚至可以在必要的时候通过程序来生成这个配置。

就像大多数tasks一样, grunt-contrib-uglify 插件的 uglify task 期望配置与它同名，这里指定了 banner 选项，以及一个名叫 build 的属性用来把一个源码压缩并放置到一个目标文件。

// 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'
    }
  }
});

载入 grunt plugins 和 tasks

大多公用的tasks 像 concatenation minification 和 linting 都已经是grunt 的plugins。只要一个plugin被指定为package.json的一个依赖，并且通过npm install 安装，就可以在Gruntfile通过简单的方式启用:

// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');

自定义 tasks

你可以通过default task来配置Grunt 在默认情况下运行一个或多个task。在下面的例子中，运行grunt 就会执行 uglify task. 这个功能等同于执行 grunt uglify 或者 grunt default. 任意数量的tasks 可以放入一个数组中.

// Default task(s).
grunt.registerTask('default', ['uglify']);

如果你的项目必须的tasks并没有现成的Grunt plugin, 你可以在Gruntfile自己定义一个自定义task。比如，这份Gruntfile定义了一个完全不使用task 配置的 default task.

module.exports = function(grunt) {

  // A very basic default task.
  grunt.registerTask('default', 'Log some stuff.', function() {
    grunt.log.write('Logging some stuff...').ok();
  });

};

自定义项目指定的tasks并不一定需要放在Gruntfile中，也可以通过grunt.loadTasks() 方法来引入.js 的外部文件.