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