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自动刷新页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。