搭建本地服务器的两种方式: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"]);
})
启动服务的方式跟上面一样。