安装及使用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

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