初识Grunt

首先说一下什么是构建工具，其实很简单，就是在开发的时候，我们为了使代码可维护，常常会把项目分为几个模块，但是在上线的时候，我们要是线上网页对数据文件的请求次数尽可能少，这里的数据包括js，css文件，图片等，所以我们需要把多个css文件和多个js文件，分别合并为一个，然后为了减少体积，提高页面的效率，我们需要把不必要的空格神马的都去掉，代码能简则简。这其实就是合并代码并压缩的过程，构建工具简单地说，就是做这些事情。

接下来言归正传，开始了解Grunt。

 

按照我以往的学习习惯，我一般会是这个顺序学习一个东西：

了解它是什么

了解怎么运行

了解怎么用

试验

有了一个大致了解后，再深入。

 

所以这篇文章就是对Grunt有一个大致的了解，不过Grunt也是很简单的，真的不需要太多功夫就可以学会，难点在于对每个插件的使用

 

Grunt中文官网：gruntjs.net

Grunt英文官网：gruntjs.com

 

NPM的全称是Node.js Package Manager，很显然就是Node.js的包管理工具。Grunt也是基于node的，所以grunt也是要使用npm来安装的。所以首先我们要安卓node.js，版本一定在0.8.0以上。

 

接下来我们来到你的项目的根目录下，我们使用grunt要依赖两个文件，这个两个文件分别是package.json和Gruntfile.js。

其中package.json，通俗的说，但是不一定很准确，就是用来管理和记录grunt的插件的，每当你安装一个插件，都会在package.json里面记上一笔。如果你没使用命令行去修改package.json，也要手动修改这个文件的。下面就是一个package.json的例子。

 

{
      "name": "access",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "grunt": "^0.4.5",
        "grunt-contrib-concat": "^0.5.1",
        "grunt-contrib-connect": "^0.10.1",
        "grunt-contrib-copy": "^0.8.0",
        "grunt-contrib-cssmin": "^0.12.2",
        "grunt-contrib-jshint": "^0.11.2",
        "grunt-contrib-sass": "^0.9.2",
        "grunt-contrib-uglify": "^0.9.1",
        "grunt-contrib-watch": "^0.6.1",
        "grunt-filerev": "^2.3.1",
        "grunt-usemin": "^3.0.0"
      }
}
        

 

　　

 

Gruntfile.js这个文件主要是用来做 设置配置，加载插件，注册任务这3个事儿。下面是一个Gruntfile.js的例子

 

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        copy: {
            build: {
                files: [
                    {
                        expand: true,
                        dest: 'release',
                        cwd: 'develop',
                        src: ['index.html', 'scripts/lib/jquery.js', 'data/data.js', 'data/images/*', 'data/images/css/*']
                    }
                ]
            }
        },
        concat: {
            generatedjs: {
                files: [
                    {
                        dest: '.tmp/concat/scripts/app.js',
                        src: [
                            'develop/scripts/lib.js',
                            'develop/scripts/search.js',
                            'develop/scripts/websites.js',
                            'develop/scripts/drag.js',
                            'develop/scripts/page-num.js',
                            'develop/scripts/popup-window.js'
                        ]
                    }
                ]
            },
            generatedcss: {
                files: [
                    {
                        dest: '.tmp/concat/styles/app.css',
                        src: [
                            'develop/styles/base.css',
                            'develop/styles/search.css',
                            'develop/styles/websites.css',
                            'develop/styles/page-num.css',
                            'develop/styles/popup-window.css'
                        ]
                    }
                ]
            }
        },
        uglify: {
            generated: {
                files: [
                    {
                        dest: 'release/scripts/app.js',
                        src: ['.tmp/concat/scripts/app.js']
                    }
                ]
            }
        },
        cssmin: {
            generated: {
                files: [{
                    expand: true,
                    cwd: '.tmp/concat/styles',
                    src: ['app.css'],
                    dest: 'release/styles',
                    ext: '.css'
                }]
            }
        },
        useminPrepare: {
            html: 'release/index.html'
        },
        usemin: {
            html: 'release/index.html',
            js: [
                'release/scripts/{,*/}*.js'
            ],
            css: [
                'release/styles/{,*/}*.css'
            ]
        }
    });

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-filerev');
    grunt.loadNpmTasks('grunt-usemin');

    grunt.registerTask('build',[
        'copy:build',
        'useminPrepare',
        'concat:generatedjs',
        'concat:generatedcss',
        'cssmin:generated',
        'uglify:generated',
        'usemin'
    ]);
}

 

当所有需要用的插件都安装好了，然后这两个文件都配置好了，我们在它们俩所在的目录运行grunt build，就可以将相应的代码合并并且压缩，我们也可以使用插件jshint来检查合并后的js文件里面是否存在简单的语法错误。

了解了它是什么，怎么运行，怎么用之后，我们开始具体的实验吧。

第一步，我们要把grunt这个命令做一个全句化，在命令行输入一下命令：

npm install -g grunt-cli

这条命令的是作用是：将grunt放在你的系统路径下，也就是system path，使得你再任何一个目录下都可以使用grunt命令。但是，一定要注意，这只是把grunt命令加入全局中，而不是安装了grunt，我们接下来还是要安装grunt的。

第二步，配置package.json文件。进入项目的根目录，输入命令：

npm init

其中项目的名字就是你文件的名字，也就是根目录的名字，其他的不懂什么意思的都可以直接按回车跳过。配置结束后，你看dir或者ll一下，项目的文件里会多了一个package.json文件。

第三步，安装grunt以及其插件。命令如下：

//安装grunt
npm install grunt --save-dev
//安装grunt插件 grunt-contrib-cssmin
npm install grunt-contrib-cssmin --save-dev

这里 --save-dev的作用就是把安装的插件写在package.json里面的devDependencies里面。

 第四部，当你要使用的插件都安装好了，我们开始配置Gruntfile.js这个文件。

Gruntfile.js这个文件通常包括一个wrap函数，函数里面包括三个部分。最外层的wrap的写法就是固定的，没有为什么，这么写就是了

 

module.exports = function (grunt) {

}

这个函数里面包括三个部分。

第一部分是grunt的任务配置，它的是通过向grunt.initConfig()这个函数传递配置参数来时实现的。所传递的配置参数是一个对象，这个对象的属性为插件的名称，属性值为插件相应的配置信息，一个插件可以配置很多不同的任务，比如下面的这段代码，就是插件grunt-contrib-cancat的配置，它配置两个任务，分别用来合并js和css。

concat: {

            generatedjs: {
                files: [
                    {
                        dest: '.tmp/concat/scripts/app.js',
                        src: [
                            'develop/scripts/lib.js',
                            'develop/scripts/search.js',
                            'develop/scripts/websites.js',
                            'develop/scripts/drag.js',
                            'develop/scripts/page-num.js',
                            'develop/scripts/popup-window.js'
                        ]
                    }
                ]
            },
            generatedcss: {
                files: [
                    {
                        dest: '.tmp/concat/styles/app.css',
                        src: [
                            'develop/styles/base.css',
                            'develop/styles/search.css',
                            'develop/styles/websites.css',
                            'develop/styles/page-num.css',
                            'develop/styles/popup-window.css'
                        ]
                    }
                ]
            }
        }

 

下面就是grunt.initConfig()的一个完整的配置，其中pkg的那一行是用来提取package.json文件的，pkg也就是一个对象了。

 

grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        copy: {
            build: {
                files: [
                    {
                        expand: true,
                        dest: 'release',
                        cwd: 'develop',
                        src: ['index.html', 'scripts/lib/jquery.js', 'data/data.js', 'data/images/*', 'data/images/css/*']
                    }
                ]
            }
        },
        concat: {
            generatedjs: {
                files: [
                    {
                        dest: '.tmp/concat/scripts/app.js',
                        src: [
                            'develop/scripts/lib.js',
                            'develop/scripts/search.js',
                            'develop/scripts/websites.js',
                            'develop/scripts/drag.js',
                            'develop/scripts/page-num.js',
                            'develop/scripts/popup-window.js'
                        ]
                    }
                ]
            },
            generatedcss: {
                files: [
                    {
                        dest: '.tmp/concat/styles/app.css',
                        src: [
                            'develop/styles/base.css',
                            'develop/styles/search.css',
                            'develop/styles/websites.css',
                            'develop/styles/page-num.css',
                            'develop/styles/popup-window.css'
                        ]
                    }
                ]
            }
        },
        uglify: {
            generated: {
                files: [
                    {
                        dest: 'release/scripts/app.js',
                        src: ['.tmp/concat/scripts/app.js']
                    }
                ]
            }
        },
        cssmin: {
            generated: {
                files: [{
                    expand: true,
                    cwd: '.tmp/concat/styles',
                    src: ['app.css'],
                    dest: 'release/styles',
                    ext: '.css'
                }]
            }
        },
        useminPrepare: {
            html: 'release/index.html'
        },
        usemin: {
            html: 'release/index.html',
            js: [
                'release/scripts/{,*/}*.js'
            ],
            css: [
                'release/styles/{,*/}*.css'
            ]
        }
    });

 

配置信息的部分先说到这，至于怎么去配置每一个插件，这要去查每个插件的文档，通常每一个插件的配置都是一个对象值，这个值的第一层对象值是自定义的，比如cssmin里面的generated，它是一个任务的名字，当下面注册任务时，我们可以选择每个插件执行时要用的哪个配置，参见下面的介绍吧。

 第二部分，加载插件，其实就是通过一个函数来实现的。

grunt.loadNpmTasks('grunt-contrib-cssmin')；

 

将要加载的插件名传进去。

 第三部分，注册任务。这也是一个函数，grunt.registerTask();

grunt.registerTask('build', [
    'copy:build',
        'useminPrepare',
        'concat:generatedjs',
        'concat:generatedcss',
        'cssmin:generated',
        'uglify:generated',
        'usemin'
]);

第一个参数是使用grunt命令时候，后面跟的参数，如果这个名字是default的话，我们就可以直接运行grunt就可以了。第二个参数是任务，针对上面的这个端代码来说，就是当你在命令行输入grunt build的时候，就会按顺序执行第二个参数中列出的任务，是按顺序的哦！

grunt的简单的用法就是这些，待我再学习学习，整理一下一些常用插件的用法。