如何通过grunt构建工具来合并压缩文件

简介：

文件压缩与合并：文件压缩的目的是为了减少文件的大小，减少文件所占的带宽，加快文件在网络上的传输，降低企业宽带成本，提升用户体验。文件合并的目的是为了减少http请求次数，以便提高网络并发访问的能力。

grunt：和gulp类似，grunt也是自动化构建工具之一，grunt生态系统非常庞大，拥有数量庞大的插件可供选择，因此，你可以利用grunt自动完成任何事。对于很多前端开发人员来说最常见的需要自动化完成的任务如文件合并和压缩都可以通过grunt来实现，今天我们就通过实践来了解和学习一下grunt的使用。

实操：

1.安装nodejs

grunt 也是基于 Node.js ，那么我们就需要先安装 nodejs。在windows平台可以直接到https://nodejs.org/en/下载客户端，安装nodejs就像其他windows平台软件安装一样简单。使用nodejs需要依赖命令行，安装好后在命令行执行 node -v 可以查看版本号，若看到版本号说明安装成功。（若已安装node，此步可跳过）。

2.全局安装grunt

gulp的安装需要依赖npm包管理工具，目前该管理工具和nodejs是一起打包安装的不需要另外安装。在安装好nodejs后在命令行执行 npm -v 可以查看版本号，若看到版本号说明npm安装成功。

接下来通过命令行执行 npm install -g grunt-cli 全局安装grunt。

安装成功后通过命令行执行 grunt -version 可以查看到grunt版本号，说明grunt安装成功。

（若已安装grunt此步可跳过）

3.在项目目录中创建package.json

通过文件管理窗口或开发工具文件管理窗口，在所在的项目中创建package.json文件，在windows平台下我的项目目录是C:\test\web。文件内容如下

{
    "name": "web1",//项目工程名，可以是任意名称，只要名字符合规范即可
    "version": "0.1.0",//工程项目版本号，可任意
    //以下是核心很重要，不能出错
    "devDependencies": {
        "grunt" : "~1.0.1",//依赖的grunt版本号，根据实际安装的grunt而定
        "grunt-contrib-concat" : "~0.3.0",//要用到的文件合并插件grunt-contrib-concat的版本号
        "grunt-contrib-uglify" : "2.3.0"//要用到的文件压缩插件grunt-contrib-uglify的版本号
    }
}

4.在项目中安装grunt

在项目目录下，在命令行执行 npm install grunt –save-dev 命令，会在项目中安装grunt。下面是安装进度。

以下是安装成功后的结果。

5.在项目中安装grunt-contrib-concat，grunt-contrib-uglify插件

在项目目录下，在命令行执行npm install 命令，会在项目中根据之前的package.json下载插件。在这里我们主要使用grunt-contrib-concat来合并文件，用grunt-contrib-uglify来压缩文件。

6.通过grunt和插件来执行特定任务

创建需要合并和压缩的文件在此我的项目目录如下。

开始合并压缩任务之前需在项目目录下创建并配置Gruntfile.js，grunt通过该文件来执行相关任务。该文件的内容如下。

//包装函数（wrapper function），用来包装 Grunt 配置
module.exports = function(grunt) {
    //初始化配置对象
    grunt.initConfig({
        //从文件 package.json 文件中读取项目的配置，并存储到 pkg 属性中。这样我们可以通过 pkg 属性来引用 package.json 文件中的配置。
        pkg: grunt.file.readJSON('package.json'),

            //合并任务
        concat : {
            web1 : {
                files : {
                    'dist/main.js' : ['./test/drag.js','./test/scale.js']，
                    'dist/main2.js' : ['./test/drag.js','./test/scale.js']
                }
            }
        },
            //压缩任务
        uglify : {
            web2 : {
                files : {
                    'dist/main.min.js' : ['dist/main.js']
                }
            }
        }
    });

    //加载执行任务所需插件
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');

    //设置默认执行的任务，就是在命令行grunt命令无参时要执行的任务
    grunt.registerTask('default', ['concat','uglify']);
};

在项目目录下执行grunt开始任务。执行结果如下。

任务执行完后，查看文件夹结果。进行了合并和压缩任务。

至此，通过grunt合并压缩文件的任务就执行完了。

备注：

1.Grunt 基于 Node.js ，Grunt 以及它的插件们，都作为一个 包 ，可以用 NPM 安装进行管理。NPM 生成的 package.json 项目文件记录当前项目中用到的 Grunt 插件，而 Grunt 会调用 Gruntfile.js 这个文件，解析里面的任务（task）并执行相应操作。
2.创建package.json文件有两种方式，本文只叙述了一种，另一种可参考http://blog.csdn.net/u012829160/article/details/71760280）
3.package.json可通过npm init自动生成，如果不对package.json进行配置，安装grunt或gulp及其插件只会安装默认版本，如果配置了该文件就会以配置的版本来安装相应软件。