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 命令行可以好好看下