前端自動化構建 之 省時的瀏覽器同步測試工具

 前言

　　最近用html編寫本身的簡歷，每次修改簡歷內容或者樣式的時候，都要刷新一下瀏覽器才能看到效果，甚是麻煩。恰好昨天總結了gulp,grunt等前端自動化構建工具，我想着，要不也利用前端自動化構建工具，實現瀏覽器的實時自動刷新，這樣子每次我修改內容和樣式的時候，能夠及時看到變化。

 

Browsersync

　　Browsersync 能讓瀏覽器實時、快速響應您的文件更改（html、js、css、sass、less等）並自動刷新頁面。更重要的是 Browsersync能夠同時在PC、平板、手機等設備下進項調試。您能夠想象一下：「假設您的桌子上有pc、ipad、iphone、android等設備，同時打開了您須要調試的頁面，當您使用browsersync後，您的任何一次代碼保存，以上的設備都會同時顯示您的改動」。不管您是前端仍是後端工程師，使用它將提升您30%的工做效率。

 

使用方式

①結合grunt

首先，安裝依賴包

$ npm install grunt-browser-sync grunt --save-dev

而後配置gruntfile.js文件

// 這是一個完整的配置文件！
module.exports = function (grunt) {
  grunt.initConfig({
    browserSync: {
      dev: {
        bsFiles: {
          src: [
            'css/*.css',
            '*.html',
            '**'
          ]
        },
        options: {
          // watchTask: true,
          server: './'
        }
      }
    }
  });

  // 加載NPM任務
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-browser-sync');

  // 定義默認任務
  grunt.registerTask('default', ['browserSync']);
};

而後 命令行輸入 grunt ,會自動打開 localhost:3000

當 發生 File event [change]，瀏覽器會自動刷新

 

② 結合gulp

首先安裝依賴包 

$ npm install browser-sync gulp --save-dev

而後配置 gulpfile.js

var gulp = require('gulp');
// var nodemon = require('gulp-nodemon');
var browserSync = require('browser-sync')
  .create(); // 靜態服務器
const reload = browserSync.reload;

gulp.task('browser-sync', function () {
  var files = [
    './*html',
    'css/*.css',
    'images/**'
  ];
  browserSync.init({
    server: {
      // 默認index.html
      baseDir: "./"
    },
    browser: "chrome"
  });

  // HTML文件改變時，手動重載
  gulp.watch("css/*.css")
    .on("change", reload);
  gulp.watch("*.html")
    .on("change", reload);
});


gulp.task('default', ['browser-sync']);

命令行輸入 gulp

 

  修改文件的時候，會自動reloading browsers...

小結 

　　更多詳細內容請查看 用戶文檔 ：http://www.browsersync.cn/docs/