Grunt 使用（二）uglify插件压缩javascript代码

本文在配置grunt基本环境的基础下，讲解如何使用grunt-contrib-uglify进行javascript压缩

本文只介绍了grunt-contrib-uglify插件的一种压缩方式适用于大部分情况，详细请看：https://www.npmjs.com/package/grunt-contrib-uglify

1、安装contrib-uglify

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

2、添加add.js 和 delete.js 源文件

//目录解构

reporter                      //根目录

    ++++build                 //打包输出目录
        -------打包生成的文件

    ++++src                   //源代码开发文件目录
        -------add.js
        -------delete.js

Gruntfile.js                  //grunt项目配置文件
package.json                  //项目信息文件（查看依赖）

add.js

var nj = 09;
var ij = 10;
var add = function(a,b){
　　return a+b;
}
add(nj, ij);

delete.js

var a = 19;
var b = 20;
var deletes = function(a,b){
　　return a-b;
}
deletes(a, b);

3、配置Gruntfile.js

module.exports=function(grunt){
    console.log("进入了Gruntfile.js文件")
  //任务配置，所有插件的配置信息
  grunt.initConfig({
    //获取package.json的信息
        pkg:grunt.file.readJSON('package.json'),
        
        //uglify 插件的配置信息
        uglify: {
            options: {
                banner:'/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
        　　　　　'<%= grunt.template.today("yyyy-mm-dd") %> */' // 配置打包后文件头部描述
            },
            my_target: {
          　　　　files: {
            　　　　'build/<%= pkg.name %> - v<%= pkg.version %>.min.js': ['src/add.js','src/delete.js']
          　　　　}
        　　}
        }
  });
  
  //加载grunt-contrib-uglify
  grunt.loadNpmTasks('grunt-contrib-uglify');
  //告诉grunt当我们在终端中输入grunt时需要做些什么（注意先后顺序）
  grunt.registerTask('default',['uglify']);
};

options.banner:是打包后的输出文件头部显示的注释，一般我们使用package.js里的name、version等来描述。

mytarget.files：是基础文件的打包配置

• build是打包后的输出目录。名字可自定义，再此我用的package.json的name和version作为压缩后的名字
• 被打包文件，可以是个数组，将多个指定路径的文件打包到一个文件下。

注意：

• 以下两句很重要，我们下载安装了uglify,还要将插件uglify加载进来

//加载grunt-contrib-uglify
grunt.loadNpmTasks('grunt-contrib-uglify'); 
//告诉grunt当我们在终端中输入grunt时需要做些什么（注意先后顺序）
grunt.registerTask('default',['uglify']);//在此编写uglify这个字符串，是为了执行grunt的时候，就执行这个插件。

• 第二步在配置打包文件，和打包后的输出文件以及路径

my_target: {
    files: {
        'build/<%= pkg.name %> - v<%= pkg.version %>.min.js': ['src/add.js','src/delete.js']
    }
}        

4、执行grunt命令进行打包

//执行grunt出现一下消息代表打包成功

D:Projectgrunt_demo>grunt
进入了Gruntfile.js文件
Running "uglify:my_target" (uglify) task
>> 1 sourcemap created.
>> 1 file created 172 B → 206 B

Done.

打包之后的文件展示：

/*! grunt_demo - v1.0.1 - 2019-03-15 */
var nj=9,ij=10,add=function(e,n){return e+n};add(nj,ij);var a=19,b=20,deletes=function(e,n){return e-n};deletes(a,b);

（完）