gulp+browserSync自动刷新页面

BrowserSync

“Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。”

简单的说，BrowserSync就是搭建一个nodeJs服务器，监听指定文件，文件改动后，能够自动刷新所有设备的页面。开发时再也不用手动刷新页面啦，yeah~。

安装

首先，要安装nodeJS。

然后通过npm全局安装browserSync。

npm install -g browser-sync

完成后，查看版本号

browser-sync --version

恭喜你，安装成功啦。

输入一下命令就可以启动服务器啦，默认端口号为3000，如果默认端口号被占用，browserSync会寻找其他可用的端口号。当然，也可以通过--port指定端口号、

browser-sync start --server

更多的命令行使用方法可以参看官网。

gulp

直接上gulpfile.js代码吧。最后一行，当html发生改动后，会自动刷新页面。

let gulp = require('gulp');
let browserSync = require('browser-sync').create();gulp.task('server', ['stylus', 'babel'],function() {browserSync.init({server: {baseDir: './'}})gulp.watch(`${mod}/*.html`).on('change', browserSync.reload);
})

监听静态文件

gulp.task('stylus', function() {return gulp.src(filePath.css.src()).pipe(stylus({compress: true,use: nib()})).pipe(gulp.dest(filePath.css.dest())).pipe(browserSync.stream())
})gulp.task('stylus:watch', ['stylus'], browserSync.reload())gulp.task('babel', function() {mod = argv.m;return gulp.src(filePath.js.src()).pipe(babel({presets: ['es2015']})).pipe(gulp.dest(filePath.js.dest()));
})gulp.task('babel:watch', ['babel'], browserSync.reload())

只需要在任务的最后，调用reload方法，即可自动刷新页面了。这里只在监听任务中调用了reload（）。

转载于:https://www.cnblogs.com/zhangyubao/p/7003889.html

gulp+browserSync自动刷新页面相关推荐

vscode保存代码，浏览器自动刷新页面
一.Live Server 之前挺好用的,但是今天发现Live Server可以运行到浏览器,但是保存代码之后不能自动刷新浏览器了.经过查资料,试了以下方法: 前提:在文件夹中运行 1.将vscode ...
BJUI接受TabID实现添加或编辑后自动刷新页面
场景借助于BJUI框架,不管是添加还是编辑,都要共用同一个页面,执行同一个save方法. 参照: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/ ...
ios 返回不会自动刷新页面问题
在实际开发过程中,移动端的兼容性问题有很大的坑,安卓可以了ios不行,ios可以了安卓又失效了这样,其中ios的回退操作就是不会自动刷新页面,很烦! 常见的history.back() history ...
javascript(js)自动刷新页面的实现方法总结
自动刷新页面的实现方法总结: 1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔 ...
[vue-cli]在使用vue-cli开发vue项目时，自动刷新页面的原理你了解吗？
[vue-cli]在使用vue-cli开发vue项目时,自动刷新页面的原理你了解吗? 自动刷新页面并不是vue-cli的功能,而是webpack的hot-module-replacement-plug ...
Servlet 自动刷新页面
假设有一个网页,它是显示现场比赛成绩或股票市场状况或货币兑换率.对于所有这些类型的页面,您需要定期刷新网页. Java Servlet 提供了一个机制,使得网页会在给定的时间间隔自动刷新. 刷新网页的 ...
java web ajax异步刷新页面,ajax自动刷新页面有关问题
当前位置:我的异常网» Java Web开发 » ajax自动刷新页面有关问题 ajax自动刷新页面有关问题 www.myexceptions.net 网友分享于:2013-12-19 浏览:21 ...
Python：Flask自动刷新页面livereload
pip install livereload 文档:https://pypi.org/project/livereload/ 代码 #coding=utf-8from flask import Fla ...
自动刷新 html,JavaScript自动刷新页面的方法
使用JavaScript location.reload方法刷新网页.当用户点击一个链接此代码可以自动在一个事件调用. 如果想使用鼠标点击刷新网页,可以用下面的代码:Refresh Page 要了解它 ...

gulp+browserSync自动刷新页面

gulp+browserSync自动刷新页面相关推荐

最新文章

热门文章