基于grunt构建的前端集成开发环境

目标是实现自动检查JS错误以及合并压缩JS和CSS。

Grunt和 Grunt 插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。

下面简单的介绍下Grunt的安装（MAC下）：
1. 安装Node.js
node.js下载地址：http://nodejs.org/download/ 

2.安装完Node后，打开终端，输入

sudo npm install -g grunt-cli 

要root权限才可以，我第一次安装的时候，网上说npm install -g grunt-cli 结果出现了一大堆坑爹的英文错误提示，其中有句：Please try running this commnd again as root/Administrator .
如果之前装过低版本的Grunt,可以先卸载

npm uninstall -g grunt

3.然后在你的项目目录下新建两个文件：package.json  Gruntfile.js

package.json 是用来保存你需要的插件的列表（插件名称以及作用可以到http://gruntjs.com/plugins去查询，这里例子里用的这个uglify是合并压缩JS的）

{ 
       "name": "my-php",
        "version": "0.1.0",
        "devDependencies": {
            "grunt": "~0.4.1",
            "grunt-contrib-uglify": "~0.2.2" 

        } 
}

Gruntfile.js
这个文件里面是JS代码，是保存任务用的，这个文件可以到使用的时候才建立也行（前面说过Grunt 是一个基于任务的JavaScript工程命令行构建工具）

module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    compress: {
      files: {
        'js/output.min.js': ['js/test1.js','js/test2.js']

      }
    }
  }
});
    // Load the plugin
  grunt.loadNpmTasks('grunt-contrib-uglify')
    // Default task(s)
    grunt.registerTask('default', ['uglify']);

}

4.cd到项目目录下
执行：npm install
程序会根据你配置的package.json自动下载文件

5.好了开始测试
在程序目录新建文件夹JS，里面再弄2个文件：test1.js  test2.js  (这里的文件夹名以及文件名和Gruntfile.js里的对应)

终端里输入
grunt uglify:compress
好吧，如果你没配置错误的话你将看到


Running "uglify:compress" (uglify) task
File "js/output.min.js" created.

Done, without errors.

这个时候你的文件夹JS里面也会多出一个output.min.js，打开之后你会发现这是test1.js和test2.js合并压缩后的文件。


JS的合并压缩就这样搞定了！ 其他项目的时候  只要把配置文件改一下就可以了。
至于其他功能（JS检查，CSS合并压缩检测等）可以下载对应的插件，然后编好任务，都能一起实现的。
grunt官方网站：http://gruntjs.com/plugins

 

在GITHUB上放了一个参考https://github.com/w3c100/grunt