grunt入门之windows下搭建一个最基本的grunt项目

买不起mac，因此只能在windows上玩了

工具是用来解放劳动力的，拥抱工具，珍惜生命。

以前也听过grunt不过一直没用过，最近突然又来了兴趣，于是研究了一下，发现官网上写的那些东西直接让人云里雾里啊。。看来我还是理解不了老外那种跳来跳去的思维。。

那就一步步来吧，本文旨在让你跑起一个最基础的grunt项目：js压缩、css合并。

第一步：环境搭建

安装nodejs，因为grunt依赖它，地址为http://nodejs.org/download/

安装grunt，nodejs安装完后就可以直接安装grunt了，注意不是双击nodejs.exe安装，而是在cmd里安装，开始=》运行=》cmd，打开控制台，输入命令npm install -g grunt-cli就可以安装了

安装git for windows，这个是为了使用类似linux下的命令行，windows的cmd命令行太弱了。地址为：https://code.google.com/p/msysgit/downloads/detail?name=Git-1.8.1.2-preview20130201.exe&can=2&q=full+installer+official+git，打不开的说明被墙了，在csdn下载里搜一个吧

第二步：建立测试文件夹和测试文件

任意路径下新建一个文件夹：grunttest，在文件夹下建立 a.js, a.css, b.css文件，然后在文件里随便输入点东西吧。

第三步：建立Gruntfile.js、package.json

package.json是对项目的属性进行配置，里面包含了项目要依赖的grunt插件：

{
  "name": "gunttest",
  "version": "0.1.0",
  "description": "gunttest",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.3.0",
    "grunt-contrib-nodeunit": "~0.1.2",
    "grunt-contrib-cssmin": "~0.5.0"
  }
}

Gruntfile.js是对grunt要执行的任务进行配置：

module.exports = function(grunt) {
    grunt.initConfig({
        uglify:{
            options:{
                mangle:false
            },
            build:{
                files:{
                    "min/a.min.js":[ "a.js" ]
                }
            }
        },
        cssmin:{
            compress:{
                files:{
                    "min/all.min.css":[ "a.css", "b.css" ]
                }
            }

        }
    });
    grunt.loadNpmTasks("grunt-contrib-uglify");
    grunt.loadNpmTasks("grunt-contrib-cssmin");
    // Default task(s).
    grunt.registerTask("default", [ "uglify" ]);
};

第四步：执行命令

首先安装我们需要的插件，打开刚刚安装的git for windows软件，软件安装后的名字为Git Bash，然后通过bash命令进入到我们的文件夹：cd /f/grunttest/，然后安装插件，npm install，等待安装完成就行，安装后文件夹下会多一个node_modules目录

然后就可以执行我们的grunt命令了：

压缩js：

grunt uglify

合并css：

grunt cssmin

最后看看我们的文件夹，已经多了一个min文件夹，里面是处理过的文件。

这样执行效率显然不高，我们可以使用grunt watch插件，实时监控文件变化，自动运行命令。

完了 有问题欢迎指正