在前端开发中，我们经常使用到 grunt 来管理我们的构建流程和任务。而使用 grunt 时，一个常见的需求是在开发过程中能够快速地启动一个本地服务来进行调试、验证和开发工作。这个时候，我们可以使用 grunt-express-server 这个 npm 包，它可以帮助我们快速搭建一个 Express.js 服务器，并且支持热加载和自动刷新。
安装
在使用 grunt-express-server 之前，我们需要在项目中安装该 npm 包。可以使用以下命令进行安装：
npm install grunt-express-server --save-dev
配置
在安装完 grunt-express-server 之后，我们需要在 Gruntfile.js 中进行配置，将该任务添加到我们的任务列表中，代码如下：
-- -------------------- ---- -------
-------------- - -------- ------- -
------------------
-------- -
-------- -
-- -----------------
--
---- -
-- ----- --- --------------
-
-
---
-- --- -------------------- ----
-------------------------------------------
-- ---------
----------------------------- ----------- ---------------
-在上述代码中，我们首先定义了一个叫做 express 的任务，然后在这个任务的 options 和 dev 属性中分别设置了该任务的配置项。其中 options 是所有环境共用的配置项，而 dev 是针对开发环境的配置项。接下来，我们就来详细介绍一下这些配置项。
options
options 是 grunt-express-server 提供的所有环境共用的配置项。
-- -------------------- ---- ------- -------- - -- ----------- ---- ----- ----- -- ------------------- ------- -------- -- -------------------------- -- -- ---- ------- ------ ------------- ----------- ---------- ---------------------- -- --------------- -- -- ---- ------- ------- --- -- ---- ---------- ------ ---- ----------- ----- -- --- ---------- ------- ----- --------------- ------ -- ---- --------- ------ ----- -- ----- ---------------------------------- -- ----------------- ---------- ------ -- ------------------ ------------ ----- -- ----- --------- ------------- ----- --------------- ----- ------- ------ ---------- ------ -- ---------------------- ---------------- -- ------------ ----- --- -- ------------ -- ------------ ---- -- -
这些配置项都是非常常用的，其中比较重要的是 port、server 和 files。一般来说，我们需要将 files 中需要监听的文件设置得越准确越好，这样当文件发生变化时，grunt-express-server 才会自动刷新服务器页面。
dev
dev 是 grunt-express-server 针对开发环境所提供的配置项。
dev: {
options: {
// 这里填写 options 中的配置项
}
}dev 的作用是为我们提供方便，在执行 grunt express 命令时自动启动开发服务器。我们可以在使用时指定不同的环境参数，比如：
grunt express --env=dev
示例
下面我们来看一个示例，假设我们的项目目录结构如下：
app/
├── index.html
├── css/
│ └── style.css
└── js/
└── main.js
Gruntfile.js
package.json我们需要使用 grunt-express-server 来启动一个本地开发服务器，并监听 app 文件夹下的所有 HTML、CSS、JS 文件的变化，并在文件发生变化时自动重新加载页面。我们可以使用以下配置项：
-- -------------------- ---- -------
-------------- - -------- ------- -
------------------
-------- -
-------- -
----- -----
------- --------
------ ------------- ----------- ---------- ---------------------
--
---- -
-------- -
----------- ----
-
-
-
---
-------------------------------------------
----------------------------- ----------- ---------------
-接下来我们执行以下命令：
grunt express --env=dev
然后我们打开 http://localhost:8080/index.html 就可以看到我们的开发页面了。当我们修改 app 文件夹下的任何 HTML、CSS、JS 文件时，grunt-express-server 会自动刷新页面，让我们的开发过程更加流畅。
结束语
在前端开发中，使用 grunt-express-server 是非常方便的。它可以让我们快速开启一个本地开发服务器，并在文件变化时自动重载，让我们的开发过程变得更加高效。同时，它也支持多种配置项，我们可以根据项目的需要进行自定义配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb743b5cbfe1ea0611793