什么是 nui-build？
nui-build 是一个前端开发工具，封装了一些常用的自动化工作流程，可以帮助我们快速搭建 Web 项目。它采用了自动化构建工具 Gulp 作为工作流引擎，同时也内置了一些 Gulp 插件实现打包压缩、处理 Less、自动添加浏览器厂商前缀等功能。
怎样安装 nui-build？
安装 nui-build 很简单，首先确保你的电脑上已经安装了 Node.js 环境，然后打开终端（Windows 系统是 cmd 或 Powershell，Mac 或 Linux 系统是终端），输入以下命令即可安装：
npm install --save nui-build
这里使用了 npm 包管理器安装，--save 选项表示将 nui-build 作为项目的依赖保存在 package.json 文件中。
怎样使用 nui-build？
使用 nui-build 前，需要了解它的最基本的使用方法。在项目根目录下，可以新建一个名为 gulpfile.js 的文件，用来编写自定义构建任务。以下是一个简单的示例：
-- -------------------- ---- ------- -- -- ---- - --------- ----- ---- - ---------------- ----- -------- - --------------------- -- ---- --- ---------------- ---------- - ------ ---------- -------------------------- --- -- ---- -------------------- --------------------展开代码
在上述代码中，我们定义了一个名为 nui 的任务，使用了 nuiBuild() 方法生成构建任务流，并在 dist/ 目录下输出结果。同时，还定义了一个默认任务，通过运行 gulp 命令执行。
nui-build 的高级用法
除了基本的使用方法，nui-build 还提供了诸多高级用法，可以根据实际应用场景进行配置。
1. 自定义任务流
在 nui-build 中，我们可以使用 nuiBuild() 方法自定义任务流的内容。比如，我们可以添加一个名为 html 的任务，使用 gulp-htmlmin 插件实现 HTML 文件压缩：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------- - ------------------------ ----- -------- - --------------------- ---------------- ---------- - ------ ---------- -------------------------- --- ----------------- ---------- - ------ ---------------------- --------------- ------------------- ---- --- -------------------------- --- -------------------- ------------------ ---------展开代码
运行 gulp 命令，就会同时执行 nui 和 html 两个任务。
2. 自定义配置项
nui-build 内置了一些默认的配置项，可以帮助我们快速配置项目。比如，varPath 表示 Less 变量文件存放路径，jsEntry 表示 JavaScript 入口文件路径等。我们也可以通过添加自定义配置项，实现更灵活的构建配置。比如，我们可以添加一个名为 cacheDir 的配置项，表示临时文件目录：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- -------- - --------------------- ------------------------ - ---------- ---------------- ---------- - ------ ---------- -------------------------- --- -------------------- --------------------展开代码
这里，我们添加了一个名为 cacheDir 的配置项，表示临时文件目录为 .cache/。在使用 nuiBuild() 方法时，nui-build 会根据配置项构建任务流。
总结
nui-build 是一个实用的前端开发工具，可以帮助我们快速搭建 Web 项目。我们可以通过安装和使用 nui-build，了解其基本用法和高级用法，实现灵活的构建配置。希望本文能够对您有所启发和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d581e8991b448e028c
