前言
每个前端开发者都知道，在开发过程中，要使用很多工具来构建和部署项目。而使用这些工具可能会让我们感到很烦恼，因为它们需要一些繁琐的配置和命令。
因此，有一个强大且易于使用的工具在前端开发中就显得尤为重要了。fez 就是这样一个工具。
fez 是什么？
fez 是一个基于 Node.js 的构建工具，可以帮助你构建前端项目。
fez 的特点
- 简洁：fez 不需要像其他构建工具那样需要很多配置文件和参数。只需要一个简单的配置文件即可完成一切。
- 功能丰富：fez 集成了许多有用的插件，如压缩 CSS、JS、HTML，处理图片等等。
- 强大：由于 fez 基于 Node.js 开发，因此可以方便地扩展它，以满足你的需求。
- 易用：fez 的语法非常简单明了，即使是初学者也能快速上手。
安装 fez
使用 npm 安装 fez：
npm install fez -g
这将全局安装 fez。
fez 的使用
创建一个 fez 项目
使用 fez，需要创建一个配置文件来描述你的项目。以下是一个简单的配置文件示例：
-- -------------------- ---- ------- ---- -------- ------------- - -------- -------------- - --------- ---------------- - -------- ---- - ------ - -------- ------------- ---------------- ------ --------------- ----------------------------------------- ------------------- ----- --- - -- --展开代码
其中，exports.input 指定了项目的源码目录，默认为 ./src；exports.output 指定了编译输出目录，默认为 ./dist；
exports.getTasks 可以定义 fez 任务。
任务可以被定义为一个函数，函数的第一个参数是回调函数，当任务完成时必须调用这个回调函数。
运行 fez 任务
有了配置文件之后，我们可以使用如下命令来运行：
fez这将运行 fez 的默认任务。如果你想运行特定的任务，可以使用任务名称作为参数：
fez <taskName>
例如， fez clean 将运行上面示例中定义的 clean 任务。
示例
假设我们有一个项目，其中包含以下文件：
src/ |-- style.css |-- script.js |-- index.html
我们想要构建这个项目，并将编译的文件保存在 dist 目录中。我们可以使用以下配置文件：
-- -------------------- ---- ------- ---- -------- ------------- - -------- -------------- - --------- ---------------- - -------- ---- - ------ - -------- ------------- ---------------- ------ --------------- ----------------------------------------- ------------------- ----- --- -- ------ ----------- --- ------- - ----------------------- ------------------ - ----- ----- -- --------------- -------- - -------------------------- -------------------- - --- -------------------------------- ---------- ----------- ----------- ------------- --- -- ----- ----------- --- ------ - ---------------------- ----------------- - ----- ----- -- --------------- -------------------------------- ---------- ----------- ---------- ------------- --- -- ------- ----------- ------------------- - ----- ----- -- -------------------------------- ---------- ----------- ------------ ------------- --- -- -------- --------- ------ ----- ------- -- --展开代码
我们定义了四个任务：clean、css、js 和 html。clean 任务清空输出目录，css 任务将处理 CSS 文件（使用了 PostCSS 处理并自动添加前缀和压缩 CSS），js 任务将处理 JavaScript 文件（使用了 UglifyJS 来压缩JavaScript），html 任务则直接复制 HTML 文件。build 任务将依次执行 clean、css、js 和 html，以生成最终的编译结果。
现在，在项目根目录下运行以下命令：
fez buildfez 会执行所有的任务以生成输出文件：
dist/ |-- style.css |-- script.js |-- index.html
恭喜你，你已经使用 fez 成功构建了你的第一个前端项目！
小结
fez 是一个非常优秀的前端构建工具，在前端开发中得到了广泛的使用。它的语法简单明了，易于上手，同时也十分强大，可以扩展和定制以满足你的需求。希望通过本文，你可以快速理解并使用 fez 这个工具来构建你的前端项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcc64b5cbfe1ea0612789
