初探grunt

本文持续更新ing~

昨天开始接触grunt，grunt是node.js的一个工具，grunt有什么作用呢？三个字：自动化。当你需要压缩、整合文件(如css、js等)，或者是编译、单元测试，只要配置好它的文件，grunt就会自动帮你完任务，让你不用花费太多时间在这些琐碎而无意义的事情上，从而更好地把精力放在编码上。 

第一步 安装node.js

前面说到，grunt是node.js的一个工具，node.js是什么？简单来说，node.js是一个让JS运行在服务器端的开发平台。具体的这里不作详细介绍。所以首先第一步，安装node.js(http://nodejs.org/)。现在的node.js版本都自带npm，下载完就可以直接用npm命令来下载我们所需要的模块。

隐藏关卡 坑爹的npm

这一步非必须，感觉用npm下载模块速度慢的可采取此方法

npm会下载我们所需要的模块，但是npm是从国外的网站获取和下载模块信息，有时候下载一个模块卡在那卡半天，想死的心都有了。后来实在没辙，就google了下，也找到了各种各样的解决方法。用来用去最稳定最快的还是用cnpm代替npm。打开DOC，输入

npm config set registry="http://r.cnpmjs.org"

之后它就会去http://r.cnpmjs.org获取和下载模块信息了。( http://r.cnpmjs.org是国内的镜像，获取和下载的速度自然快很多)

第二步 安装Grunt

打开开始菜单，nodejs文件夹里有个Node.js command prompt(就是一个DOS)，打开后输入

npm install -g grunt-cli

搞定

第三步 搭建一个grunt项目

先新建一个文件夹

要搭建一个grunt项目，该文件夹里最起码要有这两个文件：package.json和Gruntfile.js

package.json

package.json是用来告诉npm这个项目要用到哪些npm模块的。那么package.json怎么写呢？

第一种方法，你可以在文件夹里新建一个txt，然后从官网copy相应代码进去，然后将该txt名字改为package.json保存。之后用DOS cd到你新建的文件夹的位置，输入

npm install

它就会自动就下载package.json里devDependencies里相对应的模块，并存储在一个叫node_modules的文件夹里。(如果你还需要其他模块，就在devDependencies里继续添加，你加了多少npm install就会自己去下载多少)

第二种方法，打开DOS cd到你新建的文件夹，输入

npm init

自动生成一个package.json

之后再通过输入命令来安装我们自己所需要的模块。比如我等会会用到conat和uglify，那我现在就可以输入

npm install grunt --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-uglify --save-dev

解释下上面的命令的意思，以第一条为例 npm install grunt就是获取和下载grunt到node_modules文件夹里，--save-dev则是自动更新package.json(自动将下载后的模块添加到devDependencies里）

Gruntfile.js

Gruntfile.js其实就是grunt的配置文件，一个基本的Gruntfile应该如下：

module.exports = function(grunt) {

  grunt.initConfig({
    uglify:{
      build: {
        src: 'src/test01.js',
        dest: 'build/lib.min.js'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');

  grunt.registerTask('default', ['uglify']);
};

grunt.initConfig({ })里面的代码先别管，一个基本的Guntfile应该具备以下四部分：

module.exports  模块的公开接口

grunt.initConfig 任务的配置代码，比如你要用到concat(合并)，uglify(压缩)，jshint(检查语法错误)等等，就在这里面配置

grunt.loadNpmTasks 插件加载声明，你在grunt.initConfig({})里配置了哪些任务，就要在这里去加载相应的插件

grunt.registerTask 定义任务组合，第一个参数为default时，在DOS下cd到你的文件夹，执行 grunt 命令便会自动去执行第二个参数里面的任务组合

grunt

如果第一个参数不为default，如grunt.registerTask('test', ['uglify', 'concat', 'jshint']);则执行 grunt + 第一个参数 命令便会自动执行第二个参数里面的任务组合

grunt test

第四步 将grunt运用到你的项目中去

经过前面三步，grunt就已经配置OK了，接下来只需要在grunt.initConfig({})里面配置你想要的任务，再运用到你的项目中即可。

具体如何使用，我还没有完全了解。等掌握了之后再继续发表心得。

本文持续更新ing