前言
在前端开发中，一些重复性的任务是不可避免的，例如压缩、合并文件等等操作。为了解决这些问题，前端社区涌现出了各种各样的工具，其中比较流行的构建工具之一就是 grunt。而在 grunt 的插件库中，有一个名为 grunt-makemin 的插件可以有效实现对静态资源进行压缩及合并的操作，本文着重介绍这个插件的使用方法。
安装
安装 grunt-makemin 可以通过 npm 进行安装，需要提前安装 node.js 和 npm。
npm install grunt-makemin --save-dev
构建任务
构建过程主要分为以下几个步骤：
- 清理目标文件夹。
这个步骤不是必须的，但是经常需要清理构建目录，可以避免每次构建时遗留之前的历史文件。
- 压缩文件并存入目标文件夹。
grunt-makemin 支持压缩多种类型的文件，例如 HTML、CSS、JavaScript、图片等等。
- 合并文件并进行压缩。
合并之前需要将准备好的源文件引入到定义任务的 js 文件中（即 Gruntfile.js）。
配置
grunt-makemin 的配置十分灵活，你可以为单个任务定制任务选项，也可以定义多个任务进行多个文件的操作。
-- -------------------- ---- -------
-------- -
------- -
------ -
---- ---------------
----- -------
--
-------- -
----------- -----
---------- -----
--------- -----
----- -----
------- -----
------------- -----
-
-
-如上代码，定义了一个任务名叫做 target，其 options 中的配置参数含义如下：
minifyHtml：是否压缩 HTML，默认为 true。
minifyCss：是否压缩 CSS，默认为 true。
minifyJs：是否压缩 JavaScript，默认为 true。
imgo：是否对图片进行压缩，默认为 false。
noDemo：是否删除示例文件夹，默认为 true。
keepComments：是否保留注释，默认为 false。
示例
创建一个示例项目，包含以下三个文件：
index.html
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------------
----- ---------------- -----------------
-------
------
---------- -------------------
------- ----------------------
-------
-------app.js
console.log('Hello, grunt-makemin!');style.css
body {
background-color: #eee;
}创建一个 Gruntfile.js，进行 grunt-makemin 配置：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
-------- -
------- -
------ -
---- ---------------
----- -------
--
-------- -
----------- -----
--------- -----
---------- -----
----- -----
------- -----
------------- -----
-
-
-
---
------------------------------------
----------------------------- -------------
--其中 src 字段为源文件，dest 为目标文件夹。
在命令行中运行 grunt，将会生成以下文件：
dist/index.html dist/app.min.js dist/style.min.css
总结
grunt-makemin 是一款强大的前端构建工具，可以实现对静态资源进行压缩及合并。通过本文的介绍和示例，相信大家已经了解了如何使用 grunt-makemin，希望能够在实际工作中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cc381e8991b448e6421