如何在每次 gulpfile 修改后自动重启构建？-JavaScript中文网-JavaScript教程资源分享门户

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

安装依赖

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

npm install -D 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