gulp+browserSync自动刷新页面
2017-06-02 13:26
543 查看
BrowserSync
“Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下:“假设您的桌子上有pc、ipad、iphone、android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师,使用它将提高您30%的工作效率。”
简单的说,BrowserSync就是搭建一个nodeJs服务器,监听指定文件,文件改动后,能够自动刷新所有设备的页面。开发时再也不用手动刷新页面啦,yeah~。
安装
首先,要安装nodeJS。
然后通过npm全局安装browserSync。
完成后,查看版本号
恭喜你,安装成功啦。
输入一下命令就可以启动服务器啦,默认端口号为3000,如果默认端口号被占用,browserSync会寻找其他可用的端口号。当然,也可以通过--port指定端口号、
更多的命令行使用方法可以参看官网。
gulp
直接上gulpfile.js代码吧。最后一行,当html发生改动后,会自动刷新页面。
监听静态文件
只需要在任务的最后,调用reload方法,即可自动刷新页面了。这里只在监听任务中调用了reload()。
“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()。
相关文章推荐
- gulp+browserSync+nodemon 实现express 全端自动刷新的实践
- 使用gulp和browser-sync实现自动刷新浏览器
- BrowserSync的大坑,监听不起作用解决办法,附gulp浏览器同步自动刷新部署方法
- 使用Gulp与BrowserSync做页面刷新
- browserSync+gulp多浏览器实时刷新页面
- Browser-sync 一款前端开发中用于自动刷新页面的工具
- 使用gulp+browser-sync搭建Sass自动化编译以及自动刷新
- 使用gulp和browser-sync实现自动刷新浏览器
- Gulp+browser-sync打造前端开发自动刷新
- 利用gulp-connect和browserSync创建本地服务器,实时刷新页面
- express+gulp+gulp-nodemon+browser-sync自动刷新
- 使用gulp和browser-sync实现浏览器自动刷新
- gulp browser-sync 完整配置 浏览器自动刷新
- 移动端页面调试神器-browser-sync 实时刷新
- 前端写代码自动刷新神器Browsersync
- Gulp 项目简单构建,自动刷新页面
- 前端浏览器自动刷新神器:Browsersync
- gulp-connect实现页面实时自动刷新
- 使用gulp和browserSync实现页面自动刷新
- Gulp+BroserSync实现浏览器自动刷新