之前朋友给我推荐这个东西的时候，我瞬间感觉自己的认知被打破了，还能这样的啊，无数个惊叹号冒出来！
官方介绍是这样的：
Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是** Browsersync可以同时在PC、平板、手机等设备下进项调试**。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。
我来个简单的说明吧：
使用了这个东西以后，你不同浏览器打开都会被监听，只要你代码有任何改动，所有打开的设备都会跟着改变，比如你手机浏览器打开了这个页面，你css里面改一个背景色，保存css，再看看手机，你没有做任何操作背景色已经改变了！神奇吗？
废话不多说了，我就记录下操作步骤，以免忘记。
第一步：安装node.js（这就省略记录了，以后单独开个记录文）
第二步：使用gulp init命令生成配置文件，新建gulpfile.js文件，这个主要用来执行我们的任务，也就是gulp的主文件
第三步：npm install --save-dev browser-sync gulp，安装插件并写入配置
第四步：gulp live这一步就算完成了，live是我在gulpfile.js里面配置的方法
配置文件和主文件我都贴出来，仅供参考
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');//同步调试工具 gulp.task('live', function() { browserSync({ files: ['./css/*.css','./*.html'], //监听修改地址 open: "external", //打开外部URL -必须在网上 port: 802, proxy: "192.168.42.173:802" }); });
网友评论