Grunt学习笔记之开发环境的搭建与创建一个基本的项目

**开篇言**
Grunt需要在Nodejs的环境，Grunt和 Grunt 插件是通过 Nodejs的包管理器（npm） 安装并管理。
查看是否已经安装nodejs，如果已经安装nodejs，在安装Grunt之前确保nodejs是最新的版本，更新nodejs，执行 npm update -g npm 指令进行升级（在某些系统中可能需要 sudo 指令）。
搭建Grunt的环境时，不会安装Grunt，而是安装grunt-cli，并安装到全局环境中，Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。

**nodejs安装：**
1、下载对系统的nodejs版本安装包。下载地址：[https://nodejs.org/en/download/](https://nodejs.org/en/download/)。
2、下载完成后直接执行相应的运行程序即可安装，windows：msi与exe  Mac Os：pkg
3、通过命令的方式来安装，MacOs：
curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\.pkg</a>.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"
其他的相关安装教程详见：[https://nodejs.org/en/download/package-manager/#windows](https://nodejs.org/en/download/package-manager/#windows)

**Grunt CLI安装**
安装时可能需要使用sudo（针对OSX、*nix、BSD等系统中）权限或者作为管理员（对于Windows环境）来执行以下命令:
npm install -g grunt-cli

**Grunt CLI 工作原理**
每次运行grunt 时，他就利用node提供的require()系统查找本地安装的 Grunt。正是由于这一机制，你可以在项目的任意子目录中运行grunt 。
如果找到一份本地安装的 Grunt，CLI就将其加载，并传递Gruntfile（之后会做讲解，这里只需要有这个东西即可）中的配置信息，然后执行你所指定的任务。想了解更多地Grunt CLI执行原理请阅读相关源代码。地址：[Grunt CLI源代码](https://github.com/gruntjs/grunt-cli/blob/master/bin/grunt)，到此为止就可以使用Grunt了。

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

步骤:
1、创建一个目录：如:/Volum/D/gruntProject
2、进入项目的根目录，创建一个package.json的文件（备注：这是一个json文件，遵循json格式的编写规范，相应地json规范请参见：[json官网](http://www.json.org/)），package.json应当放置于项目的根目录中，与Gruntfile在同一目录中，并且应该与项目的源代码一起被提交。
    方式一:创建一个package.json的文件，添加如下内容（注意json文件中是不能有注释的）
        {
          "name": "my-project-name",    //项目的名称
          "version": "0.1.0",    //项目的版本号
          "devDependencies": {    //依赖的grunt插件
              "grunt": "~0.4.5",   //采用grunt-cli安装的grunt到这里才安装了Grunt
              "grunt-contrib-jshint": "~0.10.0", //项目中使用的grunt插件，根据需要添加
          }
        }
    方式二:使用命令创建package.json文件
        ①、大部分 [grunt-init](http://www.gruntjs.net/project-scaffolding) 模版都会自动创建特定于项目的package.json文件。
        ②、[npm init](https://docs.npmjs.com/cli/init)命令会创建一个基本的package.json文件。
        得到的package.json文件内容：
        {
              "name": "my-project-name",
              "version": "0.1.0",
              "devDependencies": {
                    "grunt": "~0.4.5",    //这个会自动的安装最新grunt版本
                    "grunt-contrib-uglify": "~0.5.0"
              }
        }
4、在package.json所在目录下运行npm install将依据package.json文件中所列出的每个依赖来自动安装适当版本的依赖。这样就可以在Gruntfile中自己的编译程序了。

Grunt及插件的安装管理
方式一：在package.json包中的devDependencies 配置段中添加相应地插件：如
    ...
    "devDependencies": {
        "grunt": "~0.4.5",   //grunt会被安装
        "grunt-contrib-jshint": "~0.10.0",  //grunt的插件会被安装
        "grunt-contrib-nodeunit": "~0.4.1",
        "grunt-contrib-uglify": "~0.5.0"
    }
    ...
方式二：通过命令在安装，向已经存在的package.json 文件中添加Grunt和grunt插件的最简单方式是通过*npm install <module(插件模块)> --save-dev*命令，使用该命令会再package.json的devDependencies段中添加最新的插件
如：
安装grunt，添加grunt的devDependencies命令：
npm install grunt --save-dev
安装JSHint 任务模块插件：
npm install grunt-contrib-jshint --save-dev

**Gruntfile**
Gruntfile.js 或 Gruntfile.coffee 文件是有效的 JavaScript 或 CoffeeScript 文件，应当放在你的项目根目录中，和package.json文件在同一目录层级，并和项目源码一起加入源码管理器。
Gruntfile由以下几部分构成：
"wrapper" 函数
项目与任务配置
加载grunt插件和任务
自定义任务

①、"wrapper" 函数
    每一份 Gruntfile （和grunt插件）都遵循同样的格式，你所书写的Grunt代码必须放在此函数内：
    module.exports = function(grunt) {
      // Do grunt-related things in here
    };
②、项目与任务配置
    大部分的Grunt都依赖某些配置数据，这些数据被定义在一个对象内，并传递给grunt.initConfig()函数。也就是grunt.initConfig(Object o)函数接收一个Grunt的初始化配置数据对象来初始化Grunt。
    这个配置数据对象<传递给initConfig()方法的对象>中可以存储任意的数据,只要它不与你任务配置所需的属性冲突，否则会被忽略。此外，由于这本身就是JavaScript，你不仅限于使用JSON；你可以在这里使用任意的有效的JS代码。如果有必要，你甚至可以以编程的方式生成配置。
    grunt.file.readJSON('package.json') 将存储在package.json文件中的JSON元数据引入到grunt config中。
    例：
    grunt.initConfig({    //initConfig()中的{...}就是配置数据对象
      pkg: grunt.file.readJSON('package.json'),   //加载package.json对象到grunt中，这样就可使使用pkg来应用package.json中的属性
      uglify: {      //点一个任务 这使用的是压缩代码插件
        options: {
          banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
        },
        build: {     //uglify任务的目标
          src: 'src/<%= pkg.name %>.js',
          dest: 'build/<%= pkg.name %>.min.js'
        }
      }
});

③、加载 Grunt 插件和任务
    只要在 package.json 文件中被列为dependency（依赖）的包，并通过npm install安装之后，都可以在Gruntfile中以简单命令的形式使用：
    // 加载能够提供"uglify"任务的插件。
    grunt.loadNpmTasks('grunt-contrib-uglify');
④、自定义任务
    通过定义 default 任务，可以让Grunt默认执行一个或多个任务。
    // 注册一个默认的任务，此处是把uglify任务作为默认的任务。执行grunt uglify 或者 grunt default的效果一样
    grunt.registerTask('default', ['uglify']);

    如果grunt现有的插件不能满足开发的需求，可以在Gruntfile中自定义一个插件来进行相应地任务和目标。
    module.exports = function(grunt) {
      // A very basic default task.
      grunt.registerTask('default', 'Log some stuff.', function() {
        grunt.log.write('Logging some stuff...').ok();
      });
    };