grunt搭建环境学习笔记

Grunt就是一个工具箱，就像一个百宝箱，拥有非常丰富的任务插件，可以帮助开发人员实现各式各样的构建目标。

在Grunt工具箱中，按任务目标我们可以分为：

编译文档型：比如编译LESS、Sass、Stylus、Coffeescript等；
文件操作型：比如说合并、压缩JavaScript、CSS、图片等；
质量保障型：比如JSHint、Jasmin、Mocha等；
类库构建型：比如说Backbone.js、ember.js、angular.js等。
这些任务都依赖于给Grunt提供的插件来完成的，但很多工作依旧需要在命令终端手工输入命令来完成这些操作。为此在Grunt中可以使用watch任务来实现一些监听文件改变、自动触发构建等功能。从而减少人工去每次操作任务。

在安装grunt环境基础上进行如下操作：
1.新建项目文件夹，配置package.json 和 Gruntfile.js

例：在D盘下面建了一个“grunt_test”文件夹，里面建了三个空文件夹、两个空文档。

package.json:

{
  "name": "grunt_test",
  "version": "0.4.5",
  "devDependencies": {
    "grunt": "^0.4.5"
  }
}

Gruntfile.js：

module.exports = function(grunt){

    //配置
    grunt.initConfig({
        //在Gruntfile.js中获取package.json中的内容
        pkg: grunt.file.readJSON('package.json')

    });

    //注册任务  //告诉grunt当我们在终端输入grunt时需要做什么
    //（注意先后顺序）
    grunt.registerTask('default', []);

};

2.在项目目录下安装grunt

npm install grunt --save-dev

“—save-dev”的意思是，在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项。

此时，package.json：

生成文件夹node_moudles：

3.行测试，ok

附：Grunt插件介绍
插件分为两类。第一类是grunt团队贡献的插件，这些插件的名字前面都带有“contrib-”前缀，而且在插件列表中有星号标注。第二类是第三方提供的插件，不带有这两个特征。
常用插件如下：
Contrib-jshint——javascript语法错误检查；
Contrib-watch——实时监控文件变化、调用相应的任务重新执行；
Contrib-clean——清空文件、文件夹；
Contrib-uglify——压缩javascript代码
Contrib-copy——复制文件、文件夹
Contrib-concat——合并多个文件的代码到一个文件中
karma——前端自动化测试工具

学习参考：http://www.cnblogs.com/wangfupeng1988/p/4561993.html