之前朋友給我推薦這個(gè)東西的時(shí)候新娜，我瞬間感覺(jué)自己的認(rèn)知被打破了赵辕，還能這樣的啊，無(wú)數(shù)個(gè)驚嘆號(hào)冒出來(lái)概龄！
官方介紹是這樣的：
Browsersync能讓瀏覽器實(shí)時(shí)还惠、快速響應(yīng)您的文件更改（html、js私杜、css蚕键、sass、less等）并自動(dòng)刷新頁(yè)面衰粹。更重要的是** Browsersync可以同時(shí)在PC锣光、平板、手機(jī)等設(shè)備下進(jìn)項(xiàng)調(diào)試**铝耻。您可以想象一下：“假設(shè)您的桌子上有pc誊爹、ipad、iphone瓢捉、android等設(shè)備频丘，同時(shí)打開(kāi)了您需要調(diào)試的頁(yè)面躁垛，當(dāng)您使用browsersync后熊杨，您的任何一次代碼保存跨琳，以上的設(shè)備都會(huì)同時(shí)顯示您的改動(dòng)”脾猛。無(wú)論您是前端還是后端工程師绪商，使用它將提高您30%的工作效率滔金。
我來(lái)個(gè)簡(jiǎn)單的說(shuō)明吧：
使用了這個(gè)東西以后封寞，你不同瀏覽器打開(kāi)都會(huì)被監(jiān)聽(tīng)咱揍，只要你代碼有任何改動(dòng)刀崖，所有打開(kāi)的設(shè)備都會(huì)跟著改變惊科，比如你手機(jī)瀏覽器打開(kāi)了這個(gè)頁(yè)面，你css里面改一個(gè)背景色亮钦，保存css馆截，再看看手機(jī)，你沒(méi)有做任何操作背景色已經(jīng)改變了蜂莉！神奇嗎蜡娶？
廢話不多說(shuō)了，我就記錄下操作步驟映穗，以免忘記窖张。
第一步：安裝node.js（這就省略記錄了，以后單獨(dú)開(kāi)個(gè)記錄文）
第二步：使用gulp init命令生成配置文件蚁滋，新建gulpfile.js文件宿接，這個(gè)主要用來(lái)執(zhí)行我們的任務(wù)赘淮，也就是gulp的主文件
第三步：npm install --save-dev browser-sync gulp，安裝插件并寫(xiě)入配置
第四步：gulp live這一步就算完成了睦霎，live是我在gulpfile.js里面配置的方法
配置文件和主文件我都貼出來(lái)梢卸，僅供參考
package.json
{ "name": "new-app", "version": "1.0.0", "description": "", "main": "gulpfile.js", "dependencies": {}, "devDependencies": { "browser-sync": "^2.12.8", "gulp": "^3.9.1" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
gulpfile.js
var gulp = require('gulp'), //本地安裝gulp所用到的地方 browserSync = require('browser-sync');//同步調(diào)試工具 gulp.task('live', function() { browserSync({ files: ['./css/*.css','./*.html'], //監(jiān)聽(tīng)修改地址 open: "external", //打開(kāi)外部URL -必須在網(wǎng)上 port: 802, proxy: "192.168.42.173:802" }); });
