简介

新建本地静态服务，gulp-connect或gulp-webserver实现热更新

gulp-webserver

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

Hint: This is a rewrite of gulp-connect (opens new window)

安装

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

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

用法

使用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;

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

//解构赋值
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);

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

用法

• 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"]);
})

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

相关链接

https://github.com/schickling/gulp-webserver