前言
前端开发过程中，任务管理是不可避免的一环。我们需要完成诸如代码打包、压缩、语法检查、自动化测试等等一系列任务。每个任务又可能有不同的配置和执行流程，大大增加了开发的难度。 在这种情况下，一些任务管理工具应运而生，如 Grunt、Gulp、Webpack 等等。近年来，为了进一步提高产品的质量和便利性，全球数百位开发者就这些工具展开了源源不断的创新，形成了繁荣的生态系统。 本文将介绍一个轻量级的任务管理工具 @cheevr/tasks。
什么是 @cheevr/tasks？
@cheevr/tasks 是基于 Gulp 4.x 开发的一款任务管理工具，它专为前端开发而设计，提供了许多有用的功能，如：
- 完整的默认任务
- 自动生成 HTML 文件
- 自动生成 CSS 文件
- 自动生成 JavaScript 文件
- 自动实时刷新浏览器等。 除此之外，它还支持自定义任务，你可以通过配置文件来定义你所需的任务及其执行过程。
安装
首先，确保你已经安装了 Node.js 和 npm。然后在命令行中输入以下命令：
npm install -g @cheevr/tasks
使用
- 初始化项目
在项目根目录中创建一个名为 tasks.config.js 的配置文件：
-- -------------------- ---- -------
-------------- - -
------- -
----- ------
----- -------------
----- ------------------
---- ----------
--- -----------------
---- ---------------
---- ---------------
--
------ -
----- --------
---- ------------
--- -----------
---- ------------
--
--在命令行中运行：
cheevr-tasks init
它将在你的项目根目录下自动生成一个默认的文件夹结构，并且 tasks.config.js 中的配置将应用于这些任务中。
此时，你的项目结构应该类似于这样：
-- -------------------- ---- ------- ------------- -- ---- - -- ----- - -- --- -- ------ - -- ---- - -- --- - -- ---- -- --------------- -- ------------
- 创建任务
在 tasks/ 目录下，可以创建一个新的任务。由于我们已经在 tasks.config.js 中指定了源码路径和构建路径，因此在编写任务时无需重复定义这些路径。
下面是一个简单的 build-sass.js 任务示例：
-- -------------------- ---- -------
---- --------
----- - ---- ---- - - ----------------
----- ---- - ---------------------
----- ------ - ------------------------------
------------- - ---------------------
-------- ----------- -
------ -----------------------
------------------------ ---------------
------------------------------
-
-------------- - ----------- 运行任务
在命令行中运行以下命令启动任务：
cheevr-tasks
此时，它会默认启动一个任务流，包含 scss 编译、CSS 压缩、JS 压缩、HTML 自动生成、自动刷新等任务。你可以通过编辑 gulpfile.js 中的配置来禁止某些任务。
总结
@cheevr/tasks 是一个简单、轻量的任务管理工具，它可以大大提高前端开发效率，让你不再为任务管理而烦恼。通过本文的介绍，你已经可以开始使用它了。希望你在它的帮助下，能够更加轻松地完成前端开发任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ad581e8991b448d86fb