Browsersync 的簡介：

成都創(chuàng)新互聯(lián)專注于臨澤企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站開發(fā)。臨澤網(wǎng)站建設(shè)公司,為臨澤等地區(qū)提供建站服務(wù)。全流程專業(yè)公司，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

            Browsersync 是一個(gè) node 模塊，它能讓瀏覽器實(shí)時(shí)、快速響應(yīng)您的文件更改（html、js、css、sass、less 等）并自動刷新頁面。更重要的是 Browsersync 可以同時(shí)在PC、平板、手機(jī)等設(shè)備下進(jìn)項(xiàng)調(diào)試。您可以想象一下：“假設(shè)您的桌子上有 pc、ipad、iphone、android 等設(shè)備，同時(shí)打開了您需要調(diào)試的頁面，當(dāng)您使用 Browsersync 后，您的任何一次代碼保存，以上的設(shè)備都會同時(shí)顯示您的改動”。無論您是前端還是后端工程師，使用它將提高您 30% 的工作效率。有了它，您不用在多個(gè)瀏覽器、多個(gè)設(shè)備間來回切換，頻繁的刷新頁面。更神奇的是您在一個(gè)瀏覽器中滾動頁面、點(diǎn)擊等行為也會同步到其他瀏覽器和設(shè)備中，這一切還可以通過可視化界面來控制。（Browsersync 官網(wǎng)：http://www.browsersync.cn/）

            使用 Browsersync 和 gulp，你可以輕松地搭建一個(gè)本地開發(fā)服務(wù)器，然后在同一個(gè) wifi 中的任何設(shè)備都可以方便地訪問到。Browsersync 同時(shí)集成了 live-reload 所以不需要另外做配置了。

一、gulp 和 Browsersync 的聯(lián)合使用

1、安裝 “gulp 和 browser-sync”插件命令（在終端進(jìn)入到項(xiàng)目根目錄執(zhí)行）

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

2、在項(xiàng)目根目錄下提供 "browser-sync" 插件任務(wù)配置需要的 src 目錄和源文件（源文件放置到 src 目錄下）

            mkdir src

3、在 gulpfile.js 文件中配置使用 "browser-sync"

 具體示例：
// Browsersync 的簡單使用（靜態(tài)服務(wù)器）
// 將 src 目錄下的所有文件加到服務(wù)器中，并且在文件發(fā)生改變之后所有的瀏覽器都會自動刷新
var gulp = require('gulp'),    
      browserSync= require('browser-sync').create();    // 創(chuàng)建一個(gè)未命名的 Browsersync 實(shí)例  
gulp.task('serve', function () {                                      // 自定義 "serve" 任務(wù)    
   browserSync.init({                                                    // Browsersync 初始化配置
       server: {      
               baseDir: 'src'                                                
       }  
   });  
   // 監(jiān)視文件改動并重新載入
   gulp.watch(['html/*.html', 'css/**/*.css', 'js/**/*.js'], {cwd: 'src'}, browserSync.reload); 
});

具體示例：
// SASS + CSS 注入
// 當(dāng) css 文件文件預(yù)處理之后再重載它們。以 sass 為例，瀏覽器無需刷新整個(gè)頁面而僅僅只是重載 css
var gulp = require('gulp'),  
     sass = require('gulp-sass'),
     browserSync= require('browser-sync').create();    // 創(chuàng)建一個(gè)未命名的 Browsersync 實(shí)例 

// 靜態(tài)服務(wù)器 + 監(jiān)聽 scss/html 文件
gulp.task('serve', ['sass'], function() {
   browserSync.init({
       server: 'src' 
   });  

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

// 將 sass 編譯后的 css 注入到瀏覽器里實(shí)現(xiàn)更新
gulp.task('sass', function() {
   return gulp.src('src/sass/*.scss')
       .pipe(sass())
       .pipe(gulp.dest('src/css'))
       .pipe(browserSync.stream());
});

4、通過如下命令啟動服務(wù)，并且打開一個(gè)瀏覽器，訪問默認(rèn)的 URL (http://localhost:3000)

            gulp serve

PS：如果沒有錯(cuò)誤提示信息，證明就沒什么問題了?，F(xiàn)在去修改源文件，看看瀏覽器是否可以自動刷新頁面。未完待續(xù)。。。

當(dāng)前題目：gulp和Browsersync的聯(lián)合使用
當(dāng)前網(wǎng)址：http://jinyejixie.com/article18/pochdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、營銷型網(wǎng)站建設(shè)、網(wǎng)站排名、企業(yè)網(wǎng)站制作、網(wǎng)站策劃、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)