很早就听说过BrowserSync，也看过一些相关文章，可就是没用过。之前一直在用Gulp开发项目，每次编写完Sass后还要用按F5刷新页面看效果，想想也是够傻的，这么好用的东西竟然现在才开始用。
BrowserSync可以同时同步刷新多个浏览器，更神奇的是你在一个浏览器中滚动页面、点击按钮、输入框中输入信息等用户行为也会同步到每个浏览器中。
安装browser-sync模块
npm install browser-sync -g
命令行直接使用
browser-sync start --server --files "css/*.css"
使用上面命令会开启一个迷你服务器，自动帮你打开浏览器，默认地址localhost:3000，默认打开index.html，如果没有，需要手动加上你要打开的页面，如localhost:3000/test.html。
通常你不会需要默认的地址，所以需要使用代理模式：
browser-sync start --proxy "localhost:8080" --files "css/*.css"
Browsersync + Gulp
var gulp = require('gulp'), sass = require('gulp-ruby-sass'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), rename = require('gulp-rename'), notify = require('gulp-notify'); var browserSync = require('browser-sync').create(); gulp.task('sass', function() { return sass('sass/style.scss', {style: "expanded"}) //.pipe(sass({style: "expanded"})) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) .pipe(rename({suffix: '.min'})) .pipe(minifycss()) .pipe(gulp.dest('css')) .pipe(notify({ message: 'Styles task complete' })) .pipe(browserSync.stream()); }); gulp.task('serve', ['sass'], function() { browserSync.init({ server: "./" }); gulp.watch("sass/*.scss", ['sass']); gulp.watch("*.html").on('change', browserSync.reload); }); gulp.task('default', ['serve']); |
