项目的文件组织结构

Grunt

首先，我们项目用Grunt来实现项目构建的自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。像压缩、单元测试、linting等这些功能是通过Grunt的插件实现的。Grunt和Grunt的插件都是 Node.js 的包，通过npm安装，npm是 Node.js 的包管理器，类似Python中得pip_install或者Ruby中得gem。

创建一个Grunt项目

一般需要在你的项目中添加两份文件：package.json 和 Gruntfile。
package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件，放置于devDependencies配置段内。
Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的。

package.json

package.json应该放在项目的根目录中。package.json 中包含各种所需模块以及项目的配置信息（名称、版本、许可证等）meta 信息。在npm install的时候，就会根据package.json中的配置安装依赖的package。下面列出了几种为你的项目创建package.json文件的方式：

• npm init 会创建一个基本的package.json。
• 大部分 grunt-init 模版都会自动创建特定于项目的package.json文件。
• 复制下面的案例，并根据需要做扩充。

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.0",
    "grunt-contrib-nodeunit": "~0.2.0",
    "grunt-contrib-uglify": "~0.2.2"
  }
}

以npm init为例，我们在项目根目录出运行npm init，在提示的选项中填写好信息后，我们得到如下的package.json：

{
  "name": "angular-base",
  "version": "1.0.0",
  "description": "This is a Demo.",
  "main": "index.js",
  "scripts": {
    "test": "echo \\\"Error: no test.\\\" && exit 1"
  },
  "author": "Kyle Xiong",
  "license": "GNU"
}

安装Grunt 和 grunt插件

向已经存在的package.json 文件中添加Grunt和grunt插件的最简单方式是通过npm install <module> --save-dev命令。此命令不光安装了<module>，还会自动将其添加到devDependencies 配置段中。
npm install grunt –save-dev
运行后，你会在项目目录里多了 /node_modules/grunt 这个目录。这说明我们安装了grunt这个package。同时，我们打开package.json，多了如下的字段。
“devDependencies”: {
“grunt”: “^0.4.5”
}
好了，安装其他的插件类似，重复类似命令后，最后我们便得到了我们需要的package.json文件。

Gruntfile

Gruntfile.js也应该放在项目的根目录中，它是用来配置Grunt的Task的。什么是Task？我们之前安装了各种Grunt插件，假设我们用到了grunt-contrib-uglify 插件，那么这个插件要完成的uglify的动作就是一个Task。这个时候我们除了上面讲到的安装Grunt插件外，还要配置这些插件，譬如uglify为压缩（minify）源码文件并依据上述元数据动态生成一个文件头注释。

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'
      }
    }
  });
  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 默认被执行的任务列表。
  grunt.registerTask('default', ['uglify']);
};

Gruntfile 由以下几部分组成：

• “wrapper” 函数
• 项目与任务配置
• 加载grunt插件和任务
• 自定义任务

与大多数task一样，grunt-contrib-uglify 插件中的uglify 任务要求它的配置被指定在一个同名属性中。
这里要注意一点，特定于项目的任务不必在 Gruntfile 中定义。他们可以定义在外部.js 文件中，并通过grunt.loadTasks方法加载。