在现代化的前端开发中，构建工具具有重要的作用。其中，mince 是一款在项目经验基础上慢慢积累起来的前端构建工具，可以较好地满足前端构建的需求，极大地促进了前端开发的效率。
本文将详细讲解 mince 的安装、使用以及部分常用 API 的使用。
安装
在开始使用 mince 之前，需要先安装。
--- ------- ----- --
-mince: 表示需要安装的包，这个不需要修改
-g: 表示全局安装，安装在您的计算机中所有的项目都可以使用 mince。
安装完成后，您可以在命令行输入 mince -v 查看是否安装成功，如下图所示：
- ----- --
----------- ----- --- ---------------
使用
初始化
在使用 mince 构建你的项目之前，首先需要创建一个 mincefile.js 文件作为你的构建配置文件。
----- ----- - ----------------- ----- ----- - --- --------
通常情况下，mincefile.js 都放在项目的根目录下，如下：
- -- -------------- - ----- ------------
完成上述操作后，使用命令 mince 进入构建状态。
- -----
配置
mince 有很多不同的配置项，下面是 mince 的一个基本配置：
----- ----- - -----------------
----- ----- - -----------------------
----- ------ - ------------------------
----- ----- - --- -------
---- --------
----- ---------
-------- -----------------
--------- ------
--------------- -----
--------------- -----
---------- ------------------
------------- -------- ---------- ------ -
-------------------- ---- --------- -------
-
---
--------------------- -------- -- -
------ ----------------
--------------
----------------------------
----------------------------
---src
源代码文件夹 - 包含项目的所有原始文件，包括 HTML、CSS、Javascript 等。
----- ----- - --- ------- ---- ------- ---
dist
构建后的文件夹 - 最终构建的所有文件都存放在这里面。
----- ----- - --- ------- ----- -------- ---
modules
依赖文件夹 - 存放依赖文件，例如 mince 的 API、gulp、jshint 等。
----- ----- - --- ------- -------- ---------------- ---
useCache
是否使用缓存 - 此选项传递参数 true/false，默认为 true。如果使用缓存，则可以加快构建的速度。
----- ----- - --- ------- --------- ---- ---
errorHandler
错误处理 - 用于处理构建时的错误，可以在此处指定自己的处理方式。
----- ----- - --- -------
------------- -------- ---------- ------ -
-------------------- ---- --------- -------
-
---sourcemap
代码映射 - mince 支持将新生成的 Javascript 文件与原始文件进行映射，方便错误的追踪定位。
----- ----- - --- ------- --------------- ----- --------------- ----- ---------- ----------------- ---
任务
Mince 中的任务使用 task() 函数进行定义，这允许构建者使用抽象化的函数来描述要执行的操作。
例如：
----- ----- - -----------------
----- ----- - --- --------
--------------------- -------- -- -
------ --------------------
-----------------------------
---src()
获取源代码 - 指定源代码的位置，Mince 会根据文件类型调用相应的处理方法。
--------------------- -------- -- -
------ ----------------
--------------------------
---dest()
输出处理后的代码 - 将处理后的代码输出到相应的文件夹中。
--------------------- -------- -- -
------ ----------------
------------------------------
---插件
和 gulp 一样，mince 的插件越来越丰富。下面介绍一些最常用的插件：
mince-clean
清空文件夹 - 在构建之前，清空 dist/ 文件夹。
----- ----- - --- --------
----- ----- - -----------------------
--------------------- -------- -- -
------ --------------------
--------------------
-----------------------------
---mince-concat
合并文件 - 将所有 Javascript 文件合并到一个文件中。
----- ----- - --- --------
----- ------ - ------------------------
--------------------- -------- -- -
------ --------------------
---------------------------
-----------------------------
---非常简单吧。 :smile:
总结
到本文结束，你应该对 mince 的基本使用有了不错的了解，接下来就可以用 mince 打造自己的前端构建工具了。
mince 非常轻量，但是支持的 API 所具备的功能非常强大且易于扩展。
总之，mince 是一款不错的前端构建工具，您可以使用它来减轻前端工程师的工作负担，提高代码生产效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066f481d8e776d08041152