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