實時編輯

方法一

使用Google Chrome DevTools

方法二

工做區Browsersync

1. 安裝 Node.js

BrowserSync是基於Node.js的, 是一個Node模塊， 若是您想要快速使用它，也許您須要先安裝一下Node.js 安裝適用於Mac OS，Windows和Linux。

1. 安裝 BrowserSync您能夠選擇從Node.js的包管理（NPM）庫中 安裝BrowserSync。打開一個終端窗口，運行如下命令：npm install -g browser-sync您告訴包管理器下載BrowserSync文件，並在全局下安裝它們，您能夠在全部項目(任何目錄)中使用。固然您也能夠結合gulpjs或gruntjs構建工具來使用，在您須要構建的項目裏運行下面的命令:

npm install --save-dev browser-sync

1. 啓動 BrowserSync

一個基本用途是，若是您只但願在對某個css文件進行修改後會同步到瀏覽器裏。那麼您只須要運行命令行工具，進入到該項目（目錄）下，並運行相應的命令：靜態網站
若是您想要監聽.css文件, 您須要使用服務器模式。 BrowserSync 將啓動一個小型服務器，並提供一個URL來查看您的網站。

// --files 路徑是相對於運行該命令的項目（目錄）

browser-sync start --server --files "css/*.css"

若是您須要監聽多個類型的文件，您只須要用逗號隔開。例如咱們再加入一個.html文件

// --files 路徑是相對於運行該命令的項目（目錄）
browser-sync start --server --files "css/.css, .html"// 若是你的文件層級比較深，您能夠考慮使用 **（表示任意目錄）匹配，任意目錄下任意.css 或 .html文件。
browser-sync start --server --files "/.css, /.html"

// 監聽css文件
browser-sync start --server --files "css/*.css"// 監聽css和html文件
browser-sync start --server --files "css/.css, .html"動態網站
若是您已經有其餘本地服務器環境PHP或相似的，您須要使用代理模式。 BrowserSync將經過代理URL(localhost:3000)來查看您的網站。

// 主機名能夠是ip或域名
browser-sync start --proxy "主機名" "css/*.css"
在本地建立了一個PHP服務器環境，並經過綁定Browsersync.cn來訪問本地服務器，使用如下命令方式，Browsersync將提供一個新的地址localhost:3000來訪問Browsersync.cn，並監聽其css目錄下的全部css文件。
browser-sync start --proxy "Browsersync.cn" "css/*.css"

Browsersync + Gulp.js

Browsersync + Gulp.js
當您在使用gulp構建您的項目時，您只須要 require Browsersync 模塊, 利用API 並進行 選項配置。 如下是一些流行項目中常見的用例， 如 谷歌的網絡入門套件 和其餘項目。安裝^ TOP
首先，您須要安裝 Browsersync 和 依賴包 Gulp 。若是你是第一次安裝，那麼你能夠經過--save-dev命令，這將會自動在你的package.json裏添加依賴，下一次再安裝時，你只須要npm install
$ npm install browser-sync gulp --save-dev
而後，在您的 gulpfile.js 文件裏使用它們。

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

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

// 代理

gulp.task('browser-sync', function() {
browserSync.init({
proxy: "你的域名或IP"
});
});SASS + CSS 注入^ TOP
經過流的方式建立任務流程, 這樣您就能夠在您的任務完成後調用reload，全部的瀏覽器將被告知的變化並實時更新. 由於Browsersync只在意您的CSS在編譯完成 finished 後 - 注意： gulp.dest 後調用重載。

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

// 靜態服務器 + 監聽 scss/html 文件
gulp.task('serve', ['sass'], function() {

browserSync.init({
server: "./app"
});

gulp.watch("app/scss/*.scss", ['sass']);
gulp.watch("app/*.html").on('change', reload);
});

// scss編譯後的css將注入到瀏覽器裏實現更新
gulp.task('sass', function() {
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(reload({stream: true}));
});

gulp.task('default', ['serve']);SASS & Source Maps^ TOP
若是您使用 gulp-ruby-sass 與 sourcemap: true 選項, 將會生成.map 文件. 這些文件最終會被送到下游，在 browserSync.reload() 時接收它們, 它會嘗試從新加載頁面 (由於它不會在DOM裏發如今任何 .map 文件)。
要解決這個問題, 您可使用 gulp-filter 包， 以確保只有 *.css 文件響應 .reload - 這樣一來，您仍是會獲得CSS注入，而不是整個頁面重載。

var gulp = require("gulp");
var sass = require("gulp-ruby-sass");
var filter = require('gulp-filter');
var browserSync = require("browser-sync").create();

// 靜態服務器 + 監聽 scss/html 文件
gulp.task('serve', ['sass'], function() {

browserSync.init({
server: "./app"
});

gulp.watch("app/scss/*.scss", ['sass']);
gulp.watch("app/*.html").on('change', reload);
});

gulp.task('sass', function () {
return gulp.src('scss/*/.scss')
.pipe(sass({sourcemap: true}))
.pipe(gulp.dest('css'))// Write the CSS & Source maps
.pipe(filter('*/.css')) // Filtering stream to only css files
.pipe(browserSync.reload({stream:true}));
});瀏覽器重載^ TOP
有時候，您可能只是想徹底從新加載頁面 (例如，處理一堆JS文件後), 但您但願在任務發生後重載。這將在 gulp 4.x.x 時變得更容易, 但如今您能夠作到如下幾點： (確保您 return 從您的工做流 ，以確保 browserSync.reload() 被調用在正確的時間。

// 處理完JS文件後返回流
gulp.task('js', function () {
return gulp.src('js/*js')
.pipe(browserify())
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});

// 建立一個任務確保JS任務完成以前可以繼續響應// 瀏覽器重載
gulp.task('js-watch', ['js'], browserSync.reload);

// 使用默認任務啓動Browsersync，監聽JS文件
gulp.task('serve', ['js'], function () {

// 從這個項目的根目錄啓動服務器
browserSync({
server: {
baseDir: "./"
}
});

// 添加 browserSync.reload 到任務隊列裏
// 全部的瀏覽器重載後任務完成。
gulp.watch("js/*.js", ['js-watch']);
});手動重載^ TOP
若是流支持並不知足您的需求，您能夠經過建立一個任務來手動觸發重載方法。咱們建立了一個sass任務,在咱們修改文件後會在瀏覽器裏注入CSS，可是當HTML文件被更改時，瀏覽器將會被從新加載（手動重載）。

// 使用變量引用 reload 方法var reload = browserSync.reload;

// 編譯 SASS & 自動注入到瀏覽器
gulp.task('sass', function () {
return gulp.src('scss/styles.scss')
.pipe(sass({includePaths: ['scss']}))
.pipe(gulp.dest('css'))
.pipe(reload({stream:true}));
});

// 監聽scss和html文件, 當文件發生變化後作些什麼！
gulp.task('serve', ['sass'], function () {

// 從這個項目的根目錄啓動服務器
browserSync({
server: {
baseDir: "./"
}
});

gulp.watch("scss/*.scss", ['sass']);gulp.watch("*.html").on("change", browserSync.reload);});