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。