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（）。