npm 是 JavaScript 世界中最常用的包管理工具,而 task-conveyor 则是一个基于 npm 包的前端任务/流程控制工具。
安装
首先需要确保已安装了 npm 和 Node.js 版本 >= 10.0.0。
全局安装 task-conveyor:
npm install -g task-conveyor
使用
task-conveyor 的使用基于命令行,可以在终端中指定想要执行的任务集合:
task [task-1,task-2] [--options]
其中 task-1 和 task-2 分别指代任务的名称,可以通过逗号分隔指定多个任务。--options 指定可选项,例如可以通过 -b 指定想要运行的构建版本:
task [task-1,task-2] -b build-1.0.0
创建任务
在使用 task-conveyor 前需要先定义任务,任务是一个 JavaScript 模块,其中包含一个名为 run
的函数。例如,在当前项目中新建一个名为 generate
的任务,可以创建一个 tasks
目录,在其中新建一个名为 generate.js
的文件:
// tasks/generate.js module.exports = { run: () => { console.log('Generating files...') } }
在这个文件中,run
函数对应要执行的任务内容,在这个例子中简单的打印了一行日志。
创建依赖
一个任务可能会依赖于其他任务的执行结果,可以通过在任务定义中指定 dependsOn
来定义任务依赖。
例如,在上述的 generate
任务中,还需要先执行另外一个名为 clean
的任务来清理之前生成的文件,可以通过如下方式定义依赖:
// tasks/generate.js module.exports = { dependsOn: ['clean'], run: () => { console.log('Generating files...') } }
在这里指定了一个名为 clean
的任务作为当前任务的依赖。
环境变量
task-conveyor 支持通过环境变量来控制任务的运行。例如,可以通过 NODE_ENV
环境变量来设置当前任务运行的环境:
NODE_ENV=production task [task-1,task-2] [--options]
同时,也可以在任务定义中自行添加其他的环境变量。
示例代码
下面是在基于 task-conveyor 定义的一个 Gulp 构建项目的示例代码,包含了 clean
、build
和 watch
三个任务:
-- -------------------- ---- ------- -- ----------- ----- ---- - --------------- ----- ---- - ------------------------------------- ----- -------- - ------------------------- ----- ---------- - -------------------------- ----- --- - -------------- ----- -------- - --------- ----- ----------- - ----------------- ------------------ -- -- - ------ --------------- -- ------------------ -------------------- -- -- - ------ --------------------- ------------------------ ------------------------ --------------- ----------------- ---------------------------- -------------------------- --- ------------------ -------------------- -- -- - ----------------------- --------------------- --- --------------- - --------------------
其中,clean
通过 del
插件删除构建目录下的所有文件;build
编译所有的 SCSS 文件到构建目录下,并同时生成 source maps,最后通过 cleanCSS
插件压缩 CSS 输出;watch
监听源文件目录下的 SCSS 文件变化,并实时更新构建目录下的文件。
结论
task-conveyor 通过简单地定义和组合任务,以及支持依赖和环境变量等功能,提供了一个轻量级的前端流程控制工具,可以方便地构建和管理前端项目。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005590981e8991b448d66fd