前言
在我们进行前端开发过程中，往往需要将多个命令进行组合来完成一项任务。比如说在项目开发中，我们需要编译 scss，合并压缩 js，然后对静态文件进行打包，这些命令可能需要手动一个个执行，非常费时费力，特别是在需要频繁重复的情况下。一些优秀的前端工程构建工具比如 Grunt、Gulp、Webpack，它们能帮助我们自动化完成这些工作，提高开发效率。但是对于一些简单的任务，前面这些工具有时候显得过于复杂，我们需要一个轻量级的工具来将这些命令整合在一起。于是就有了本文要介绍的 npm 包——chug。
chug 是什么
chug 是一个简单、轻量级的命令行工具，它能够帮助我们对多个命令进行整合，并通过一个命令来一次性执行。它相当于是一个简化版的前端工程构建工具，可以非常方便地满足我们的一些基本需求。
安装
chug 是一个 npm 包，因此我们需要先在项目中安装它。打开终端，运行以下命令：
npm install chug --save-dev
使用
编写配置文件
在使用 chug 之前，我们需要编写一个配置文件 Chugfile.js，指定需要执行的命令及其执行顺序。这个文件需要被放在项目根目录下。
-- -------------------- ---- -------
----- ---- - ----------------
------------------ ---------- -
---------------------------
---
---------------------- ---------- -
--------------------- ---------
---
--------------------- ---------- -
--------------------- --------
---
------------------ ------------- -------------
-------------------- --------- ----------在上面的代码中，我们定义了多个任务，使用 chug.task 方法。其中 clean、build:css、build:js 都是任务名称，后面的函数则是具体任务执行的内容。build 和 default 则是特殊任务，build 用来执行构建操作，而 default 则是执行指定的默认操作。
在 build 中，我们通过数组将多个任务链接在一起，实现了多个命令的整合，而在 default 中我们又将 clean 和 build 关联在一起，这样在运行 chug 命令时，会自动执行 clean 和 build 这两个操作。
使用 chug 命令
配置好 Chugfile.js 文件之后，我们就可以使用 chug 命令了。在终端中进入项目根目录，输入以下命令：
npx chug
此时，chug 就会依据配置文件中的指令，依次执行 clean、build:css、build:js、build 这四个命令。
如果我们只想执行指定的任务，可以将任务名称作为参数来执行。
npx chug clean
这样就只会执行 clean 这个任务了。
异步任务
有时候，我们需要执行一些异步任务，比如编译 CSS、压缩图片等，这些任务需要等到异步操作完成之后才能进行下一步操作。在 chug 中，可以通过传入异步函数来定义这样的任务。
-- -------------------- ---- -------
-------------------------- ----- ---------- -
----- -------------------------------- -
------------ --------------
-------- -
-------------------
------------------
-------- -------
--
-
---
------------------- ------------
---在上面的代码中，我们通过 async 关键字定义了一个异步任务，然后在函数内部使用了 await 等待异步操作完成。在这里我们使用了 imagemin 和 imagemin-* 等插件来压缩图片。
变量替换
在 chug 中，我们可以使用类似于 Grunt 和 Gulp 的占位符来进行变量替换。通过 ${varName} 的形式，我们可以将变量插入代码中，从而实现一些基于变量的控制。
const name = 'World!';
chug.task('hello', function() {
console.log(`Hello, ${name}`);
});在上面的代码中，我们使用了 ${name} 占位符来将变量插入到控制台输出的信息中。
示例代码
为了更好地理解 chug 的使用，我们来看一个完整的示例，实现一个类似于 gulp 的 scss 编译任务。
首先，我们需要安装 node-sass 与 clean-css-cli 这两个依赖。
npm install node-sass clean-css-cli --save-dev
在项目根目录下创建 src 目录，并在其中创建一个 test.scss 的文件，来作为 scss 的测试文件。在 test.scss 中写入以下代码：
$primary-color: #333;
.test {
color: $primary-color;
}接着，我们在 Chugfile.js 中增加 scss 编译的任务。
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - ----------------
----- ---- - ---------------------
----- -------- - ---------------------
----- ----- - -
---- ------
----- ------
--
------------------ ---------- -
---------------------------
---
----------------------- ---------- -
---------------------- ----------
----- ---------- - -------------------- ----------- ------ ----------------
------ ------------- ----- -------------------- ---------- ------------ -- --------------- ------- -
-- ------- -
---------------------
- ---- -
----- --- - ----------------------
----- -------- - --- ------------------------------
--------------------------------------- ----------
-
---
---
--------------------- ---------- -
--------------------- --------
---
------------------ -------------- -------------
-------------------- --------- ----------在上面的代码中，我们首先引入了 path、node-sass、clean-css-cli，分别用来处理文件路径、进行 scss 编译、进行 css 压缩。接着，我们在 tasks 中添加了 build:scss 这个任务。在这个任务中，我们使用 node-sass 对 test.scss 文件进行编译，得到 css 内容，然后再使用 clean-css-cli 进行压缩，最后将输出的内容写入到 test.min.css 文件中。
总结
在本文中，我们介绍了 npm 包 chug 的安装与使用方法，并通过实例演示了如何使用 chug 编译 scss。chug 是一个轻量级的工具，相比 Gulp、Grunt 等工程构建工具而言更加简单易用。通过整合基本的命令，chug 能够提高我们的开发效率，减少重复操作，是前端工程化过程中不可或缺的工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77998