简介
werkint-gulp-task-watch 是一款基于 gulp 的 npm 包，它提供了文件监控、自动构建、自动刷新等功能，使得前端开发人员能够更加高效地开发和调试代码。在本文中，我们将详细介绍具体的使用方法和注意事项，希望对于前端开发人员提高工作效率有所帮助。
安装
在开始使用本工具前，需要先进行安装。使用以下命令即可完成安装：
npm install werkint-gulp-task-watch --dev
使用方法
使用前需要在项目根目录下创建一个 gulpfile.js 文件，该文件是 gulp 的配置文件。在该文件中，需要引入 werkint-gulp-task-watch 包并进行配置。具体的使用方法如下：
引入 gulp 和 werkint-gulp-task-watch 包
const gulp = require('gulp'); const watch = require('werkint-gulp-task-watch');配置文件夹路径和文件后缀
-- -------------------- ---- ------- ----- ----- - - -------- - ---- ----------------- -- -- ------ ------ --- -- ----- ---------- -- ------- - ---- --------------------- ----- ----------- -- ------- - ---- ---------------- ----- ------------ -- ------ - ---- --------- ----- ---- - --配置任务
-- -------------------- ---- ------- -------- --------- - ------ --------------------------- - ----------- ---- -- ---------------------------- --------------- ------------------------------------ -------------- ------- ---- ---- - -------- -------- - ------ -------------------------- - ----------- ---- -- ------------------------ --------------- -------------- ------- ------ --- ----------------- ----------------------------------- -------------- ------- ---- ---- - -------- -------- - ------ -------------------------- ----------------- ----------------------------------- -------------- ------- ---- ---- - -------- ------- - ------ ------------------------- -------------- ------- ---- ---- - -------- ------------ - ----------------------------- --------- ---------------------------- -------- ---------------------------- -------- --------------------------- ------- - ----- ----- - ---------------------------------- ------- ------- ------- -- -- - ------------------ ------- - -------- ---------------- - --- --- ------------- - ------------------ ------------运行任务
在命令行中输入以下命令：
gulp watch
即可启动自动构建和自动刷新功能。当你修改任何一个监控的文件后，工具将自动进行构建和刷新页面。
注意事项
1. 对于图片等文件的处理
由于图片等文件可能比较大，每次更新可能会比较耗时，因此建议在针对这样的文件进行监控时，在 gulpfile.js 中设置 watch 选项时，将这些文件单独提出来并进行处理。
2. 文件路径的中间路径
由于不同操作系统的文件路径分割符不同，因此在编写路径时建议使用 path 模块来规范路径。
3. 使用 gulp 的正确姿势
gulp 是一款自动化构建工具，它可以实现自动化构建和自动刷新等功能，为前端开发人员提供了很多便利。然而，使用 gulp 需要遵循一些规范，例如使用流模式（stream-mode）、正确使用回调等。这些规范能够使得 gulp 的使用更加高效、稳定。如果你还不熟悉这些规范，建议先了解一下相关知识再使用 gulp。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- - ------ ------ - - -----------------------------------
----- ---- - ---------------------
----- -------- - --------------------------
----- -------- - -------------------------
----- ------ - -----------------------
----- ------ - -----------------------
----- ------ - -----------------------
----- ----------- - ---------------------------------
---
- ------------- --------
- -- --- - --- ----- ---- ------ --- ---- -----
- --- --- ---- --- ------ ---- --- ------- ---- -- ---- ----- --- -- -----
--
----- ----- - -
---
- -- ----- -------- --- ------ --- ------- -------- -- ------ --- --------- -----------
- ---- ------ ------ --- --- ----- ---- -- ----- --- ---- ---- -------- ------
- ----- ----------- ------ --- ---- -------- ------
--
-------- -
---- ----------------- -- --- -- ----- -- -------
----- -----------
--
------- -
---- ---------------------
----- ------------
--
------- -
---- ----------------
----- -------------
--
------ -
---- --------- -- --- ---- ----- -- ---- ---------
----- -----
--
--
---
- ----- --- --- --- ------ ---- ---- -- - ---------
- - ---- --- - ---- ---- -- ---- --------- ---- --- ---- -- ------ -- - ----------- ------
--
-------- --------- -
------ ----
----------------------- - ----------- ---- --
----------------------------
---------------
------------------------------------
-------------- ------- ---- ----
-
-------- -------- -
------ ----
---------------------- - ----------- ---- --
------------------------ ---------------
-------------- ------- ------ ---
-----------------
-----------------------------------
-------------- ------- ---- ----
-
-------- -------- -
------ ----
----------------------
-----------------
-----------------------------------
-------------- ------- ---- ----
-
-------- ------- -
------ --------------------------------------- ------- ---- ----
-
---
- ----- ------
- ---- ---- ----- --- ------- -- --- ---- -- ---- -----
- ---- -------- --- --- ----------- -------- -- -------- --- --- --------
--
-------- ------------ -
----------------------------- ---------
---------------------------- --------
---------------------------- --------
--------------------------- -------
-
---
- ---- -- - ---- ---- ------ ---- ----- -------
- ------- ---- ----- ---- ------------------
--
----- ----- - ------------
---------------------- ------- ------- -------
-- -- -
------------------
------- -
-------- -----------------
--
---
-
--
---
- ----- --- ------- ----
--
------------- - ------------------ ------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671078dd3466f61ffde82