使用 gulp-webserver 和 browser-sync 搭建本地服务器

搭建本地服务器的两种方式：gulp-webserver 或者 browser-sync 都可以实现浏览器的自动刷新。
这两种方式都需要在gulp的环境下，如果还没有接触过gulp的小伙伴，可以点击这里，查看gulp的基本使用。

一、gulp-webserver

gulp-webserver 是搭建本地服务器，并开启，可以用它实现自动刷新浏览器的功能。

安装

使用npm安装开发环境依赖
$ npm i gulp-webserver --save-dev

或者使用yarn安装开发环境依赖
$ yarn add gulp-webserver -D

关于yarn的使用可以查看：https://blog.csdn.net/Charissa2017/article/details/104751956

用法

使用gulp.src()参数是web服务器的根目录，可能有多个目录。

这里我们使用gulp4的函数写法，在gulpfile.js文件里写如下内容：

var gulp = require('gulp');
var gulpServer = require('gulp-webserver');

function startServer() {
	return src("./dev/")
		.pipe(gulpServer({
			port: 8008,//端口号
			host: "127.0.0.1",//主机名
			livereload: true,//是否热更新
			open: true,//是否打开浏览器
		}))
}

exports.default=startServer;

参数含义

属性名	类型	默认值	描述
host	String	localhost	web服务器的主机名
port	Number	8000	端口号
path	String	/	网络服务器的路径
livereload	Boolean/Object	false	是否支持热更新
directoryListing	Boolean/Object	false	是否显示目录列表
fallback	String	undefined	文件后退到（相对于Web服务器根目录）
open	Boolean/String	false	是否打开浏览器，可以指定默认路径
https	Boolean/Object	false	是否使用https
middleware	Function/Array	[]	连接中间件功能或中间件功能列表
proxies	Array	[]	代理对象列表

通过 gulp-webserver 设置 fallback 为index.html 可以实现单页面应用：

var gulp = require('gulp');
var gulpServer = require('gulp-webserver');

function webserver(){
	return gulp.src("./dist/")
	.pipe(gulpServer({
		fallback:"index.html"
	}))
}

exports.default=webserver;

搭配本地服务器，监听文件改变实现页面自动刷新：

gulpfile.js内容如下：

//解构赋值
const {src,series,dest,watch} = require("gulp");
//gulp自动加载插件
const plugins=require("gulp-load-plugins")();

//html处理
function copyHtml() {
    return src("./src/views/**/*.html")
        .pipe(dest("./dev/"))
}
//css处理
function compileCss() {
    return src("./src/style/**/*.scss")
        .pipe(plugins.sass().on("error", sass.logError))
        .pipe(plugins.concat("all.css"))
        .pipe(dest("./dev/"))
}
//js处理
function compileJs() {
    return src("./src/js/**/*.js")
	    .pipe(plugins.concat("c.js"))
	    .pipe(plugins.uglify())
	    .pipe(plugins.rename("c.min.js"))
        .pipe(dest("./dev/"))
}
//开启服务
function startServer() {
    return src("./dev/")
        .pipe(plugins.webserver({
            port: 8008,
            host: "127.0.0.1",
            livereload: true,
            open: true,
        }))
}
//监听
function watchFile() {
    watch("./src/style/**/*.scss", (cb) => {
        compileCss();
        cb();
    })
    watch('./src/js/**/*.js', (cb) => {
        compileJs();
        cb();
    })

    watch('./src/views/**/*.html', (cb) => {
        copyHtml();
        cb();
    })
}

exports.default = series(copyHtml, compileCss, compileJs, startServer, watchFile);

命令行，直接输入 gulp 回车，启动服务。出现类似下面的内容，就说明服务启动成功了。启动成功后，会自动打开浏览器。

二、browser-sync

Browsersync 会自动启动一个小型服务器，并提供一个URL来查看你的网站，能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。

更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。

安装

使用npm安装开发环境依赖
$ npm install browser-sync --save-dev

或者使用yarn安装开发环境依赖
$ yarn add browser-sync -D

警告 - 不要使用sudo！ 如果你在 Mac OSX 下安装Browsersync并遇到问题时 - 无论是在(Global)全局还是在(Local)本地，它几乎总是因为你的NPM权限所引起的问题。查看相关 说明文档 了解如何一劳永逸来解决这个问题 - 只需2分钟:)

用法

• browser-sync 是静态服务器，create() 开启创建；
• 使用browser.init 创建服务位置和端口，server表示访问目录，自动会打开该目录下的index.html文件。
• 使用gulp.watch 做监听，并且重新执行js 的合并压缩打包等处理，最后当存储完成后，刷新网页browser.reload 是重载页面；

搭配本地服务器，监听文件改变实现页面自动刷新：

gulpfile.js文件内容如下：

var gulp=require("gulp");
var plugins=require("gulp-load-plugins")();
var browser=require("browser-sync").create();//打开浏览器
//js处理
gulp.task("setJs",function(){
    gulp.src("./js/*.js")
    .pipe(plugins.concat("c.js"))
    .pipe(plugins.uglify())
    .pipe(plugins.rename("c.min.js"))
    .pipe(gulp.dest("./dist/"))
    .on("end",browser.reload);
})
//sass处理
gulp.task("setSass",function(){
    gulp.src("./scss/b.scss")
    .pipe(plugins.sass())
    .pipe(plugins.minifyCss())
    .pipe(plugins.rename("c.min.css"))
    .pipe(gulp.dest("./dist/"))
    .on("end",browser.reload);
})
//html处理
gulp.task("setHtml",function(){
    gulp.src("./index.html")
    .pipe(gulp.dest("./dist/"))
    .on("end",browser.reload);
})
//监听
gulp.task("default",["setJs","setSass"],function(){
    browser.init({
        server:"./",
        port:4001
    })
    gulp.watch("./js/*.js",["setJs"]);
    gulp.watch("./scss/*.scss",["setSass"]);
    gulp.watch("./index.html",["setHtml"]);
})

启动服务的方式跟上面一样。