前言
随着现代网站的越来越复杂，前端构建工具的需求越来越明显，本教程将讲解如何使用 Grunt 及其插件 grunt-contrib-module-compress 来构建前端应用。
Grunt 简介
Grunt 是一个自动化构建工具，可以高效地完成一些重复性、机械性的任务，如文件的压缩、合并、加密等。它是目前较为流行的构建工具之一，可以在很多应用场景下发挥作用。
grunt-contrib-module-compress 简介
grunt-contrib-module-compress 插件是 Grunt 的一个压缩文件的插件，可以把项目中的所有文件（包括 css、js、html、图片等）打包成一个压缩文件，方便部署和发布。
安装 Grunt
首先需要在本地安装 Grunt 和 Grunt CLI（命令行接口）。在命令行中输入以下代码：
npm install -g grunt-cli
这会在全局范围内安装 Grunt CLI，以便你可以从命令行运行 Grunt。
安装依赖
接下来需要为项目安装 Grunt 和 grunt-contrib-module-compress。在项目的根目录下，运行以下代码：
npm install grunt --save-dev npm install grunt-contrib-module-compress --save-dev
这里我们使用 --save-dev，表示将这两个包安装到项目的开发依赖中，这是因为这两个包只在开发过程中需要，不需要在生产环境中使用。
配置 Gruntfile
在项目的根目录下创建一个名为 Gruntfile.js 的文件，在其中编写以下代码：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
--------- -
----- -
-------- -
-------- ---------------------
--
------ --
---- ---------- -----------------
----- ---
--
-
-
---
---------------------------------------------
----------------------------- --------------
--这里我们在 grunt.initConfig() 中定义了一个 compress 任务，这个任务包含一个 options 对象和一个 files 数组。
options 对象指定了生成的压缩文件的名称和路径。在这个例子中，我们把目标文件设置为 dist/my-project.zip，生成的压缩文件将会被保存在 dist 目录下，名称为 my-project.zip。
files 数组指定了要压缩的文件列表和它们在压缩文件中的位置。在这个例子中，我们指定了要压缩的文件列表为 src/**，这表示要包括 src 目录下的所有文件和子目录。另外，我们还使用 !scr/**/*.txt 排除了所有以 .txt 结尾的文件，这些文件不会被压缩。
运行 Grunt
在命令行中输入以下代码：
grunt
这会运行默认的 compress 任务，并生成压缩文件。生成的压缩文件将会被保存在 dist 目录下。
示例代码
-- -------------------- ---- -------
-------------- - --------------- -
------------------
--------- -
----- -
-------- -
-------- ---------------------
--
------ --
---- ---------- -----------------
----- ---
--
-
-
---
---------------------------------------------
----------------------------- --------------
--总结
grunt-contrib-module-compress 是 Grunt 的一个插件，可以实现压缩文件的功能。在本文中我们学习了如何安装 Grunt 和该插件、如何配置 Gruntfile 和运行 Grunt。希望本教程对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557fb81e8991b448d515d