在本教程中，我们将学习在我们的项目中使用Grunt Uglify Plugin来缩小JavaScript文件。

在上一个教程中，我们学会了如何使用Grunt来连接文件。
在本教程中，我们将使用"UGLify"插件进行缩小文件。

项目结构

让我们假设我们有以下项目结构。
该项目的名称是"Grunt-Project"。

在js文件夹内部我们有一个app.js文件。
这是我们要缩小的文件。

内容 app.js文件。

(function(global){
	"use strict";
	var
		greetings = function () {
			this.message = "Hello World";
		};
		greetings.prototype.getMessage = function() {
			return this.message;
		};
		global.greetings = greetings;
}(typeof window !== "undefined" ? window : this));

所以，在上面的代码中，我们有一个iife或者立即调用函数表达式。
我们将缩小此文件。

我们将写的任务

我们将在"gruntfile.js文件中"编写以下代码。

module.exports = function(grunt) {
	//project configurations
	grunt.initConfig({
		uglify : {
			options : {
				banner : "/*! app.min.js file */\n"
			},
			build : {
				src : ["js/app.js"],
				dest : "dist/app.min.js"
			}
		}
	});
	//load uglify plugin
	grunt.loadNpmTasks('grunt-contrib-uglify');
	//create default task
	grunt.registerTask("default", ["uglify"]);
};

所以，让我们开始。

安装Grunt-Contrien-Uglify

在终端中运行以下命令以在项目中安装Uglify插件。 $npm install grunt-contrib-uglify --save-dev

创建Grunt任务

打开gruntfile.js文件并执行以下内容。

module.exports = function(grunt) {
}

在上面的代码中，我们正在创建一个在每个Grunt文件及其插件中使用的函数。

创建Grunt的项目配置

现在，在我们上面创建的函数内写入以下代码。

grunt.initConfig({
	
});

所以，我们将一个物体传递给 initConfig。
我们对Grunt的所有配置都将进入这个对象。

丑化

现在，在对象内部设置 uglify属性为以下值。

uglify : {
	options : {
		banner : "/*! app.min.js file */\n"
	},
	build : {
		src : ["js/app.js"],
		dest : "dist/app.min.js"
	}
}

在上面的代码中，我们正在创建一个"选项"属性。
我们正在添加"横幅 "/*! app.min.js file */\n"将添加到缩小文件中的注释。

然后我们正在添加build属性。
在这方面，我们说我们的来源src文件是js文件夹内的app.js。
我们希望缩小文件具有名称app.min.js，我们希望它在dist文件夹内。

加载Grunt-Contract-Uglify插件

要加载UGLify插件，请写下以下代码。 grunt.loadNpmTasks('grunt-contrib-uglify');

创建默认任务

现在，最后我们将通过执行以下代码来为Grunt创建一个默认任务。 grunt.registerTask("default", ["uglify"]);

运行任务

最后运行任务类型 grunt在终端中的命令，它将使用UGLIFIFY缩小JavaScript文件。

-MacBook-Pro:grunt-project $grunt
Running "uglify:build" (uglify) task
File dist/app.min.js created: 269 B → 204 B
>> 1 file created.
Done.
-MacBook-Pro:grunt-project $

运行上面的命令后，我们将拥有 app.min.js在dist文件夹内的文件。