之前朋友給我推薦這個(gè)東西的時(shí)候，我瞬間感覺自己的認(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í)打開了您需要調(diào)試的頁(yè)面，當(dāng)您使用browsersync后，您的任何一次代碼保存，以上的設(shè)備都會(huì)同時(shí)顯示您的改動(dòng)”。無(wú)論您是前端還是后端工程師，使用它將提高您30%的工作效率。
我來(lái)個(gè)簡(jiǎn)單的說明吧：
使用了這個(gè)東西以后，你不同瀏覽器打開都會(huì)被監(jiān)聽，只要你代碼有任何改動(dòng)，所有打開的設(shè)備都會(huì)跟著改變，比如你手機(jī)瀏覽器打開了這個(gè)頁(yè)面，你css里面改一個(gè)背景色，保存css，再看看手機(jī)，你沒有做任何操作背景色已經(jīng)改變了！神奇嗎？
廢話不多說了，我就記錄下操作步驟，以免忘記。
第一步：安裝node.js（這就省略記錄了，以后單獨(dú)開個(gè)記錄文）
第二步：使用gulp init命令生成配置文件，新建gulpfile.js文件，這個(gè)主要用來(lái)執(zhí)行我們的任務(wù)，也就是gulp的主文件
第三步：npm install --save-dev browser-sync gulp，安裝插件并寫入配置
第四步：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)聽修改地址 open: "external", //打開外部URL -必須在網(wǎng)上 port: 802, proxy: "192.168.42.173:802" }); });
