安装及使用grunt

1、安装grunt

在CMD 窗口中，切换到node安装盘符，会自动切换到nodejs安装目录。

输入 npm install -g grunt-cli  回车

安装成功后会显示安装路径以及版本号。







2、使用grunt构建web程序

一、新建项目projA

projA新建两个文件夹，分别是dist和src。

源码放在src下，src下再建css和js文件夹，js目录下有两个js文件，selector.js和ajax.js。

编辑后的代码放在dest,这个grunt会自动生成。

二、新建package.json

package.json放在根目录下，它包含了该项目的一些元信息，如项目名称、描述、版本号，依赖包等。它应该和源码一样被提交到svn或git。 

package.json内容需要符合JSON语法规范，如下

{<span style="color:#000099;background-color: rgb(204, 204, 204);">  "name": "projA",  "version":"0.1.0",  "dependencies": {    "grunt": "^0.4.5",    "grunt-contrib-uglify": "^0.5.1",//压缩    "grunt-contrib-nodeunit": "^0.4.1",    "grunt-contrib-jshint": "^0.10.0",//语法检查    "grunt-contrib-concat":"~0.1.1"//合并文件  }</span>}

建好了之后打开命令行工具进入到项目根目录，敲如下命令：npm install

再查看根目录，发现多了node_modules目录，包含了五个子目录

三、新建文件Gruntfile.js

Gruntfile.js也是放在项目根目录下，几乎所有的任务都定义在该文件中，它就是一个普通的js文件，里面可以写任意js代码而不仅局限于JSON。和package.json一样它也要和源码一样被提交到svn或git。

Gruntfile.js由以下内容组成

<span style="color:#000099;">module.exports = function(grunt) {    // 配置    grunt.initConfig({        pkg : grunt.file.readJSON('package.json'),        concat : {            domop : {                src: ['src/js/ajax.js', 'src/js/selector.js'],                //合并src/js下的文件（ajax.js/selector.js）为domop.js                dest: 'dist/domop.js'            }        },        uglify : {            options : {                banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'            },            build : {                src : 'dist/domop.js',                dest : 'dist/domop.min.js'            }//压缩domop.js为domop.min.js,并且这两个目录都放在dist目录下        }     });    // 载入concat和uglify插件，分别对于合并和压缩    grunt.loadNpmTasks('grunt-contrib-concat');    grunt.loadNpmTasks('grunt-contrib-uglify');    // 注册任务    grunt.registerTask('default', ['concat', 'uglify']);};</span>

四、执行grunt任务

打开命令行，进入到项目根目录，敲grunt

在项目中即可看到合并与压缩的功能已实现了。