前端自动化工具 grunt 插件 uglify 的简单使用（一）

Grunt 的简介：

            Grunt 是一套前端自动化工具，是一个基于 node.js 的命令行工具，它一般用于：

                    1、压缩文件；

                    2、合并文件；

                    3、简单的语法检测；

                    4、监听文件变动；

                    5、less 编译；

PS：Grunt 官网 （https://gruntjs.com/）。Grunt  就像是一个工具箱，拥有非常丰富的任务插件，可以帮助开发人员实现各种各样目标任务的构建。在Grunt工具箱中，按目标任务类型我们可以分为：

                    1、编译文档型：比如编译 Less、Sass、Stylus、Coffeescript 等等；

                    2、文件操作型：比如说合并、压缩 JavaScript、CSS、图片 等等；

                    3、质量保障型：比如说 JSHint、Jasmin、Mocha 等等；

                    4、类库构建型：比如说 Backbone.js、ember.js、angular.js 等等；

            这些任务都依赖于 Grunt 提供的插件来完成的，但很多工作依旧需要在命令行终端下输入命令来完成这些操作。为此在Grunt中可以使用 watch 任务来实现监听文件的改变、自动触发构建目标任务等功能。从而避免人工每次手动去操作任务。

一，安装 node.js 和 npm（Grunt 和 Grunt 插件是通过 npm 安装并管理的，npm 是 node.js 的包管理器）

1、node.js 下载地址

            http://www.nodejs.org/download/

2、安装完成后，可通过命令行更新 npm 版本，保证是最新的

            npm  update npm  -g

PS：安装好 node.js 之后，可以在你的终端中输入“node -v”命令来查看 node.js 的版本，也顺便检测 node.js 是否安装成功。 还需要注意的两点：第一，Grunt 依赖于 node.js 的 0.8.0及以上版本；第二，奇数版本号的版本被认为是不稳定的开发版，不过从官网上下载下来的应该都是偶数的稳定版。

二、grunt-cli 环境安装

1、grunt-cli 安装命令（终端输入）

            npm  install  -g  grunt-cli 

PS：Grunt 的运行工具有两个版本，一个是服务器端版本（grunt），另一个是客户端版本(grunt-cli)。而我们在项目中需要安装的是客户端版本。grunt-cli 是 客户端版本 Grunt  的命令行接口。我们将 Grunt 的命令行（CLI）安装到系统的全局环境变量中，安装完成后就可以在任何目录下执行 grunt 命令了。

            注意：安装 grunt-cli 并不等同于安装了 Grunt。grunt-cli 的任务很简单：调用与Gruntfile.js 文件在同一目录下的 Grunt。

三、grunt 的安装

1、在终端下通过命令进入到项目的根目录下

2、提供 package.json 配置文件（package.json 文件用于保存项目元数据）

{
      "name": "demo",                
      "file": "zepto",                    
      "version": "1.1.0",               
      "description": "demo",       
      "devDependencies": {
            "grunt": "~0.4.1",                               
            "grunt-contrib-jshint": "~0.6.3",       
            "grunt-contrib-uglify": "~0.2.1",       
            "grunt-contrib-concat": "~0.2.1",     
            "grunt-contrib-requirejs": "~0.4.1",  
            "grunt-contrib-clean": "~0.5.0"        
      }
}

PS：package.json 是我们 Grunt 项目的核心配置文件，用于设置将要执行操作的项目名称，版本，描述，依赖等信息，其格式为 json 数据格式。package.json 文件是每个Grunt 项目必备的文件，因此首要条件需要先创建这个文件。创建package.json文件方式有很多种：

                    1、根据“grunt-init”模板自动创建一个特定的 package.json 文件；

                    2、在终端通过“npm init”命令自动创建一个基本的 package.json 文件；

                    3、从官网上复制或者下载一个 package.json 文件；

                    4、手工创建一个 package.json 文件；

3、执行“npm install”命令安装 Grunt 项目依赖的插件（安装成功后会在项目根目录下的  node_modules 文件夹里）

4、在配置好 package.json 文件后也可以使用命令安装 Grunt 项目依赖的插件（package.json 文件会自动更新）

        npm install grunt --save-dev

PS：这种安装一律是如下形式： npm install <module> –save-dev，不仅会安装指定的 <module> 插件，还会将插件信息自动添加到  package.json 文件的 devDependencies 区域中，且包括插件名称，版本范围。

四、Gruntfile.js  文件的配置（package.json 和 Gruntfile.js 文件都要放置到项目的根目录下）

1、提供 Gruntfile.js 配置文件

// 包装函数
module.exports = function (grunt) { 
        // 任务配置,所有插件的配置信息
        grunt.initConfig({
                // 获取 package.json 的信息
                pkg: grunt.file.readJSON('package.json'),
                // uglify 插件的配置信息
                uglify: {
                    // 文件头部输出信息
                    options: {
                        banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
                    },
                    // 具体任务配置
                    build: {
                        // 源文件
                        src: 'src/<%= pkg.file %>.js',
                        // 目标文件
                        dest: 'dest/<%= pkg.file %>.min.js'
                    }
                }
        });  
// 加载指定插件任务
grunt.loadNpmTasks('grunt-contrib-uglify');  

// 默认执行的任务
grunt.registerTask('default', ['uglify']);
};

2、Gruntfile.js 文件内容一般由四个部分组成

            1、包装函数（Gruntfile.js 文件的基本格式，意思就是我们所有的代码必须放到这个函数里面）

module.exports = function (grunt) {
        // Do grunt-related things in here
};

            2、项目和任务配置

                    我们在 Gruntfile.js 文件中一般第一个用到的就是 initConfig 方法配置项目和任务

// Project configuration.
grunt.initConfig({  
         // 获取 package.json 的信息
         pkg: grunt.file.readJSON('package.json'),
         // uglify 插件的配置信息
         uglify: {
             // 文件头部输出信息
             options: {
                 banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
             },
             // 具体任务配置
             build: {
                 // 源文件
                 src: 'src/<%= pkg.file %>.js',
                 // 目标文件
                 dest: 'dest/<%= pkg.file %>.min.js'
             }
         }
});  

            3、加载  Grunt 插件和任务

// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');

            4、自定义任务

// Default task(s).
grunt.registerTask('default', ['uglify']);

PS：Gruntfile.js 文件一般干两件事：第一，读取 package.json  的内容；第二，进行插件加载，注册任务，运行任务（Grunt 对外的接口全部写在这里面）。

五、Grunt 常用插件介绍

            Grunt 官网的插件列表页面（https://gruntjs.com/plugins ）。插件一般分为两类，第一类是 grunt 团队贡献的插件，这些插件的名字前面都带有“contrib-”前缀，而且在插件列表中有星号标注；第二类是第三方提供的插件，不带有这两个特征。

contrib-watch —— 实时监控文件变化、调用相应的任务重新执行； 
contrib-uglify —— 压缩 javascript，css 代码； 
contrib-concat —— 合并多个文件的代码到一个文件中；
contrib-jshint —— JavaScript 语法错误检查；
contrib-htmlmin —— 压缩 html 代码；
contrib-p_w_picpathmin —— 图片压缩；
contrib-requirejs —— require.js 合并管理插件；
contrib-clean —— 清空文件、文件夹； 
contrib-copy —— 复制文件、文件夹；
contrib-less —— less 编译；
karma —— 前端自动化测试工具；

PS：以上这些插件，本文不会全部讲到。但是随着讲解其中的一部分，我想你就能掌握使用 grunt 插件的方法。知道方法了，然后你就可以参考官方文档去使用你想要的插件。

六、contrib-uglify 插件的使用

1、安装 “grunt-contrib-uglify”插件命令（在终端进入到项目根目录执行）

            npm install grunt-contrib-uglify --save-dev

2、在项目根目录下提供 uglify 插件配置需要的 src 目录和需要被压缩的源文件（压缩源文件放置到 src 目录下）

            mkdir src

3、在 Gruntfile.js 文件中对 uglify 任务进行配置（压缩单个文件）

 // 包装函数
module.exports = function (grunt) { 
        // 任务配置,所有插件的配置信息
        grunt.initConfig({
                // 获取 package.json 的信息
                pkg: grunt.file.readJSON('package.json'),
                // uglify 插件的配置信息
                uglify: {
                    // 文件头部输出信息
                    options: {
                        banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
                    },
                    // 具体任务配置
                    build: {
                        // 源文件
                        src: 'src/<%= pkg.file %>.js',
                        // 目标文件
                        dest: 'dest/<%= pkg.file %>.min.js'
                    }
                }
        });  
// 加载指定插件任务
grunt.loadNpmTasks('grunt-contrib-uglify');  

// 默认执行的任务
grunt.registerTask('default', ['uglify']);
};

4、uglify 任务也可以这样配置（压缩合并多个文件）

 // 包装函数
module.exports = function (grunt) { 
        // 任务配置,所有插件的配置信息
        grunt.initConfig({
                // 获取 package.json 的信息
                pkg: grunt.file.readJSON('package.json'),
                // uglify 插件的配置信息
                uglify: {
                    // 文件头部输出信息
                    options: {
                        banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
                    },
                    // 具体任务配置
                    build: {
                        files: {
                                'dest/libs.min.js': ['src/jquery.js','src/zepto.js']    //这里是主要修改的地方
                        }
                    }
                }
        });  
// 加载指定插件任务
grunt.loadNpmTasks('grunt-contrib-uglify');  

// 默认执行的任务
grunt.registerTask('default', ['uglify']);
};

PS：<%= pkg.file %> 值为 package.json 文件中 “file”的属性值。

            uglify 插件的配置有两项：

                    “options”中规定允许生成的压缩文件中带 banner，即在生成的压缩文件第一行加一句话说明。注意，其中使用到了 pkg 获取 package.json 的内容。

                    “build”中配置了源文件和目标文件的文件名。即规定了要压缩谁？压缩之后会生成谁？注意，我们这里将源文件和目标文件的文件名通过 pkg 的 file 来命名。

5、最后在终端运行 grunt 命令

PS：如果提示 "Done, without errors."  证明就没什么问题了，现在去项目根目录下看是否已经生成了存放压缩文件的目录和压缩的目标文件。

6、在 Gruntfile.js 文件中对 uglify 任务进行配置（压缩一个文件夹下的所有指定文件）

 // 包装函数
module.exports = function (grunt) { 
        // 任务配置,所有插件的配置信息
        grunt.initConfig({  
                // 获取 package.json 的信息
                pkg: grunt.file.readJSON('package.json'),
                // uglify 插件的配置信息
                uglify: {
                    // 文件头部输出信息
                    options: {
                        banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
                    },
                    // 具体任务配置
                    build: {
                        files: [{
                            expand: true,
                            cwd: 'src',
                            src: '**/*.js',
                            dest: 'dest'
                        }]
                    }
                }
        });        
// 加载指定插件任务
grunt.loadNpmTasks('grunt-contrib-uglify');  

// 默认执行的任务
grunt.registerTask('default', ['uglify']);
};

PS：这段代码非常有意思，它会将一个文件目录里面的所有 js 文件打包到另一个文件夹中。