前言
在前端开发中，我们通常需要在本地搭建一个服务器，来方便我们调试代码和预览页面。因为使用浏览器文件协议（file://），我们无法正常加载跨域资源，从而无法正常使用 ajax 请求、访问外部库等。
这时候，使用 gulp-serve-extended 包可以为我们快速搭建一个本地服务器，方便我们进行开发、测试和调试工作。
安装 gulp-serve-extended
在使用 gulp-serve-extended 之前，我们需要先安装 gulp。可通过以下命令进行安装：
npm install --global gulp-cli
接下来，我们可以使用 npm 安装 gulp-serve-extended 包：
npm install gulp-serve-extended --save-dev
使用 gulp-serve-extended
gulp-serve-extended 是一个非常简单的 gulp 插件，通过以下代码可以快速的进行配置和使用：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----- - -------------------------------
-- ------
-------------------- ---------
-- -----------
------------------ -------
----- -----
----- -----
----------- ----
---- 通过以上代码，我们可以在默认端口号（8080）下启动一个简单的服务器。如果需要自定义端口号或自动刷新，可以传递一个配置对象到 serve() 方法中。
配置项说明
下面是 gulp-serve-extended 的常用配置项：
root: 指定服务器的根目录，默认为当前目录 ('./')。port: 指定服务器的端口号，默认为 8080。livereload: 是否开启自动刷新功能，默认为 false。如果设置为 true，我们需要在 html 文件中引入 livereload.js 文件。fallback: 当请求的文件不存在时，使用该配置项中的文件作为返回值。middleware: 一个回调函数或数组，可在请求被发送到服务器之前对请求进行修改，例如添加头信息等。
除了以上配置项，gulp-serve-extended 还有很多其他的配置项，可以在官方文档中查看。
示例
下面是一个完整的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----- - -------------------------------
-- ----- -----
-------------------- ---------
-- ------ -----------------
------------------ -------
----- -----
----- -----
----------- ----
---- 通过以上代码，我们可以在浏览器中访问 http://localhost:8080/ 来查看当前服务器的情况。
总结
在前端开发中，gulp-serve-extended 是一个非常有用的工具，可以帮助我们快速搭建服务器，方便我们进行开发、测试和调试工作。本文根据官方文档整理了一些使用方法和配置项说明，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664b81e8991b448e266f