grunt搭建自动化的web前端开发环境

首先，下面的操作使用的都是淘宝镜像NPM（全局使用命令：npm install -g cnpm --registry=https://registry.npm.taobao.org即可安装），使用这个的原因是由于NPM的服务器在国外，下载特别慢，使用淘宝NPM下载插件比较快。

1、安装Nodejs

Grunt和所有grunt插件都是基于nodejs来运行的，安装nodejs非常简单，去 https://nodejs.org/ 上，点击页面“install”按钮即可。安装了nodejs之后，可以在你的控制台中输入“node -v”来查看nodejs的版本，也顺便试验nodejs是否安装成功。

2、安装grunt命令行

要想使用grunt，首先必须将grunt-cli安装到全局环境中，用管理员权限打开cmd,输入：cnpm install -g  grunt-cli,回车，命令行会出现一个转动的小横线，表示正在联网加载。加载完成后，可以使用grunt命令验证是否安装成功：

上图表示安装成功

3、创建一个网站在F盘下创建一个“grunt_test”文件夹，里面建了build、src、test三个空文件夹以及package.json、Gruntfile.js两个文件。package.json中的内容如下：

4、安装grunt

进入F:\grunt_test目录，然后输入命令：cnpm install grunt --save-dev，这句命令的意思是在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项。回车后：

此时可以看见package.json文件中“devDependencies”有所变化：

同时grunt_test目录也有所变化，多了一个“node_modules”文件夹：

此时在命令行输入：grunt,回车后会出现：

先不管，接着往下。。。

5、配置Gruntfile.js

然后在命令行输入：grunt，回车后出现：

7、grunt插件介绍

grunt官网的插件列表页面 http://www.gruntjs.net/plugins ，插件分为两类。第一类是grunt团队贡献的插件，这些插件的名字前面都带有“contrib-”前缀，而且在插件列表中有星号标注。第二类是第三方提供的插件，不带有这两个特征。

• Contrib-jshint——javascript语法错误检查；

• Contrib-watch——实时监控文件变化、调用相应的任务重新执行；

• Contrib-clean——清空文件、文件夹；

• Contrib-uglify——压缩javascript代码

• Contrib-copy——复制文件、文件夹

• Contrib-concat——合并多个文件的代码到一个文件中

• karma——前端自动化测试工具

8、grunt插件配置

输入grunt，安装完成