gulp + browserSync 一塊兒提升前端開發效率吧！

前端開發的時候，每次修改代碼後，要移動鼠標到瀏覽器選中再刷新查看效果，不知覺間咱們的加班的時間又增長了0.5s， 真是罪孽！因此在使用gulp以後，就一直對能自動監聽文件刷新頁面的browserSync插件虎視眈眈。在這裏簡單的介紹一下用法，只須要五步，但願對你們有所幫助。

browserSync是一款瀏覽器同步測試工具，能夠單獨使用，也能夠插入在gulp、grunt等工做流裏使用。點擊官網瞭解更多。
Gulp + browserSync文檔
Grunt + browserSync文檔

step1: 在gulp中安裝插件

npm install --save-dev browser-sync

step2: 在gulpfile中引入插件

var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

step3: 啓動browserSync任務，設置參數

browserSync之因此能實現多終端自動刷新測試，是由於他在你的局域網 IP 建立一個本地服務器，生成一個相似http://10.189.249.135:3002 的 URL，這樣全部與你電腦處在一個局域網的設備，均可以訪問到你本地的頁面。

// 建立一個靜態服務器
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});

//在原有服務器中代理
gulp.task('blowser-sync', function() {
    browserSync.init({
        proxy:"localhost"  //"你的域名或IP"
    });
});

//注意，要在運行須要運用到blowser-sync的任務前，運行他的啓動任務。
gulp.task('default',['blowser-sync', 'build:css', 'watch']);

step4: 在文件流裏插入

如下是一個編譯處理css文件的任務，咱們但願在每次文件生成後自動刷新頁面。js文件同理。

gulp.task('build:css', function() {
    gulp.src(['../css/less/*.less'])  //引入文件
        .pipe(less().on('error', function (e){
            console.error(e.message);
            this.emit('end');
        }))
        .pipe(minifycss())
        .pipe(gulp.dest('../css/'))
        .pipe(reload({stream: true}));    // 在須要的地方插入reload（自動刷新）命令
});

step5: 監聽html文件

gulp.watch('../views/*/*').on('change', reload);

到這裏，整個插件配置就完成啦。每次運行gulp，終端會提示瀏覽器經過browserSync訪問的網址，以下：（除了自動刷新功能外，browserSync還能夠實現多終端同步操做。果真是我最愛的同步測試工具^0^）。

[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000        //在本機上訪問的url
    External: http://192.168.3.101:3000   //在其餘終端上訪問的url
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.3.101:3001
 --------------------------------------