browsersync

以后不需要F5了

之前实现自动刷新，是通过livereload，它需要插件比较麻烦；现在改为browsersync。

BrowserSync，迅捷从免F5开始
完整选项
不止是自动刷新:默认就有
UI界面，weinre

用法：
1、静态网站 browser-sync start --server --files "css/.css, .html"
2、动态网站 browser-sync start --proxy "主机名" --files "css/.css"
nodejs browser-sync start --proxy "localhost:3000" --files "css/.css"; 需要先把原来的网站打开；
browser-sync start --server --files "**"；此时，BrowserSync仍然会正确地判断文件变化是否是css。
3、与gulp结合
把1 2的功能用gulp来实现

var gulp = require('gulp');
var browserSync = require('browser-sync');

// 静态网站
// gulp.task('browser-sync', function(){
// browserSync({
// files: '**',
// server: {
// baseDir: './'
// }
// })
// })

// 动态网站
gulp.task('browser-sync', function() {
browserSync.init({
files: '**',
proxy: "localhost:3000"
});
});

gulp.task('default', ['browser-sync']);

scss js的处理：分别用了不同的方法，实现的效果是一样的，多多体会

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');

// 静态服务器
gulp.task('serve', function() {
browserSync.init({
files: '**',
server: {
baseDir: "./"
}
});

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

gulp.task('sass', function(){
return gulp.src('css/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
.pipe(browerSync.reload({stream: true}));
})

gulp.task('js-watch', ['js'], browserSync.reload);

gulp.task('js', function(){
return gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dest'))
;
})

gulp.task('default', ['serve']);

SASS & Source Maps 还么看
API 命令行可以好好看下