如何在每次 gulpfile 修改后自动重启构建?

Gulp 是一个流式构建工具,通过编写 Gulpfile.js 文件可以定义一系列任务,如文件合并、压缩、转换等操作。然而,每一次修改 Gulpfile.js 后都需要手动停止并重新启动 gulp 命令才能使修改生效,这对于频繁调试的开发者来说是很繁琐的。本文将介绍如何使用 nodemon 和 gulp-nodemon 插件实现在修改 Gulpfile.js 后自动重启 gulp 构建。

安装依赖

首先,我们需要安装 nodemon 和 gulp-nodemon 两个插件:

--- ------- -- ------- ------------

其中,nodemon 是一个监视文件变化并自动重启应用的工具,gulp-nodemon 则封装了 nodemon,并提供了与 gulp 集成的接口。

修改 Gulpfile.js

接下来,我们需要在 Gulpfile.js 中添加代码以启动 nodemon。通常情况下,我们会将 gulp 的相关任务放在 default 任务中,因此我们可以在 default 任务中嵌入 nodemon:

----- ---- - ----------------
----- ------- - ------------------------

-------------------- ---------- -
  -- -- ------- -- ----
  ---------
    ------- -------------- -- -----
    ---- ----- -- -------
    ------- ----------- -- -----
    ------ ----------- -- ----------
  ---------------- ---------- -
    ----------------- ----- -------------
  ---

  -- -- ---- --
  ------------------ ---------- -
    -- ---
  ---
---

上述代码中,nodemon 的参数如下:

  • script:监听的文件名,默认为 index.js
  • ext:监听的文件类型,多个类型使用逗号分隔,默认为 js,json
  • ignore:忽略的文件或目录,可以使用 glob 模式,默认不忽略任何文件
  • tasks:自动重启后执行的任务,默认为 []

gulp.task('default', ...) 中嵌入 nodemon,将会在每次修改 Gulpfile.js 后自动重启 gulp 构建,并重新执行 default 任务。如果需要在执行完 default 任务后再执行其他任务,可以在 tasks 中添加相应的任务名称。

示例代码

以下是一个完整的示例代码,包括了文件合并、压缩和转换等操作:

----- ---- - ----------------
----- ------ - -----------------------
----- ------ - -----------------------
----- ----- - ----------------------
----- ------- - ------------------------

-------------------- ---------- -
  -- -- ------- -- ----
  ---------
    ------- --------------
    ---- -----
    ------- -----------
    ------ -----------
  ---------------- ---------- -
    ----------------- ----- -------------
  ---

  -- ----
  ------------------- ---------- -
    ------ ----------------------
      -----------------------
      ---------------------------
  ---

  -- ----
  ------------------- ---------- -
    ------ -------------------------
      ---------------
      ---------------------------
  ---

  -- --- --- ---
  ------------------ ---------- -
    ------ ----------------------
      -------------
        -------- ---------------------
      ---
      ---------------------------
  ---
---

结语

本文介绍了如何使用 nodemon 和 gulp-nodemon 插件实现在每次修改 Gulpfile.js 后自动重启 gulp 构建,并提供了一个包含文件合并、压缩和转换等操作的完整示例

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/13757