前言
在前端开发中,我们经常需要编写各种任务脚本来方便我们的开发和部署工作。而在处理这些任务时,我们往往需要不停地执行一些命令或者在编辑器中手动的执行一些操作,这可能会让我们的开发工作变得相对繁琐,因此,采用一些自动化的工具来帮助我们完成这些任务,显得非常的重要。
其中一个比较好用的自动化工具就是 npm 包 pon-task-watch,它能够帮助我们实现代码的实时编译以及自动部署等功能,大大提高了我们的开发效率。接下来,笔者将为大家详细介绍如何使用 pon-task-watch 实现自动化部署的方式,希望对大家有所帮助。
简介
先来了解一下,pon-task-watch 是什么东西。
pon-task-watch 是基于 pon 和 chokidar 的 watch 任务自动化运行器,能够帮助我们自动监听文件改动来执行命令。不管是本地的自动化编译,还是服务器的自动化部署,都能够实现。并且这个任务自动化运行器很轻量,使用方便,具有非常高的灵活性,基本上满足了我们的各类需求深受前端开发人员的喜爱。
安装
安装 pon-task-watch 只需要执行以下命令:
npm install -D pon-task-watch
使用
- 在项目目录下创建 ponfile.js 文件。
如果你想要让 pon-task-watch 正常运行,你需要先在项目目录下创建 ponfile.js 文件,在该文件中编写自己的脚本逻辑代码,以便让 pon-task-watch 能够执行你想要的工作。这个文件我们可以使用项目的时间戳来动态生成需要 watch 的文件,然后搭配其他相关的插件,实现更为复杂的自动化构建和部署工作。
- 编写 ponfile.js 文件
-- -------------------- ---- ------- -------------- - - ------ - -------- ---------- ---- --------- ------ - ---- ------ ----- ------- --------- ---- ----------------------- ----- -------- -------- --------------------- --------------- ----- ----- ------------- -------------- ----- ------- -------------- ---- ----- ------- - - --
对于 ponfile.js 文件的编写,我们可以在 module.exports 对象中通过定义任务名和相关配置参数来实现任务自动化。这里我们定义了一个叫做 watch 的任务,其主要功能就是通过 npm 命令来运行 project 下面的 build 命令,实现自动编译的功能,并且可以指定需要监视的文件类型、被忽略的文件以及强制监视的文件。另外,我们还可以指定 debounceDelay 的值来调节向 Debounce 函数传递的等待时间,从而实现更加精准的监视。需要注意的是,若想在项目中使用 ponfile.js 中导出的 task,需要在控制台中输入 pon
命令。
- 执行打包命令
在项目根目录下执行 console 命令
pon watch
执行上面的命令后,就可以开始了自动化任务的监测,当有相应改动时,会自动触发任务流程。
同时我们也可以在脚本中加入其它的命令,如:
-- -------------------- ---- ------- ----- ---- - ------------------------------ -------------- - - ------ - -------- ---------- ------ ----- -- - --------- --- ------- --------------- ------- -------- ---------- ----------------- ------ - - ------- ------- - -------------------- ---------------------- --- -- ------ - ---- ------ ----- ------- --------- ---- ----------------------- -------- --------------------- --------------- ------------- -------------- -------------- ---- - - --
在上面的例子中,通过 require 引入了 excu 内置库,然后在 build 任务中执行了 npm run build 命令,最后输出对应日志内容。这就实现了 watch 任务的自动执行而且在打包完成后看到相应的提示信息。
总结
通过上述的介绍,我们已经了解了 npm 包 pon-task-watch 的基本用法以及如何实现自动化部署的方式,如果你想更深入的了解,请参考一下官方文档,同时也可以找到其他基于这个工具的项目进行探索,相信一定会感受到这个工具在前端开发中所带来的强大作用,希望这篇文章能够对大家有所启发。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedaedfb5cbfe1ea0610f09