在前端开发中，我们经常会用到一些自动化构建工具，如 Grunt，Gulp 等。而 bracks-cli 就是一个基于 Node.js 平台的一款自动化构建工具，它能够自动化完成打包、压缩、转换等任务，从而提升前端开发的效率。
本文将介绍如何使用 bracks-cli 进行自动化构建，并以使用示例为参考。
安装
安装 bracks-cli 前，需要先安装 Node.js 和 npm（Node.js 包管理工具）。如果你已经安装了 Node.js 和 npm，那么你可以使用如下命令来安装 bracks-cli：
npm i -g bracks-cli
基本使用
使用 bracks-cli 构建项目时，需要在项目的根目录下创建一个名为 bracks.config.js 的配置文件。配置文件中，我们需要指定 src（源文件目录）和 dist（输出文件目录），如下所示：
module.exports = {
src: './src',
dist: './dist',
}然后，我们就可以在命令行中使用 bracks 命令来构建项目了，如下所示：
bracks
默认情况下，bracks-cli 会进行以下操作：
- 将所有的
.scss文件编译为.css文件； - 将所有的
.js文件进行压缩，并将文件名添加.min后缀； - 将所有的
.html文件压缩，并将文件名添加.min后缀； - 将所有的
.png、.jpg、.gif文件进行压缩。
自定义任务
如果默认的任务无法满足实际需求，我们可以自定义任务。我们可以在 bracks.config.js 文件中添加 tasks 数组，其中每个元素都是一个对象，表示一个任务，如下所示：
-- -------------------- ---- -------
-------------- - -
---- --------
----- ---------
------ --
----- ---------
---- --------
----- ------
---------------- --------- ----- -
-- ---------
-------
-
--
-以上配置表示，在 src 目录下查找所有的 .txt 文件，并将它们复制到 dist/txt 目录下。其中，handler 属性表示任务处理函数，它接收三个参数：
srcPath，表示源文件路径；distPath，表示输出文件路径；next，表示任务完成时的回调函数。
如果任务执行成功，需要调用 next 函数通知 bracks-cli 继续执行下一个任务。
给任务添加依赖
在实际开发中，有些任务需要在其他任务完成之后才能执行。此时，我们可以给任务添加依赖。我们可以在任务配置中添加 deps 数组，其中每个元素表示一个依赖任务的名字，如下所示：
-- -------------------- ---- -------
-------------- - -
---- --------
----- ---------
------ --
----- --------
---------------- --------- ----- -
-- ---------
-------
-
-- -
----- --------
----- ----------
---------------- --------- ----- -
-- ---------
-------
-
--
-以上配置表示，任务 task2 依赖任务 task1，即只有当任务 task1 完成时，才能执行 task2。
示例代码
下面是一个示例项目的配置文件 bracks.config.js，其中定义了两个任务：
-- -------------------- ---- -------
-------------- - -
---- --------
----- ---------
------ --
----- ---------
---- ---------
----- ------
---------------- --------- ----- -
----- ---- - ---------------------
----- -- - --------------
----- --- - -----------------
----- --------
------------- ----------------
---
-------------------------- ---------
-------
-
-- -
----- ----------
---- -------
----- -----
---------------- --------- ----- -
----- ------ - ------------------
----- -- - --------------
----- --- - -------------------------------------- ---------
-------------------------- ----------
-------
-
--
-以上配置用于将所有的 .scss 文件编译为 .css 文件，并将所有的 .js 文件进行压缩，并将它们复制到指定的输出目录中。
我们可以在项目的根目录下使用 bracks 命令进行构建。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c82ccdc64669dde4d56