将browser-sync工具整合到gulp任务

Browsersync是个很不错的工具，它能够能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。很多人在了解了它之后都会推荐给其他人使用，能够节省很多刷新的时间，尤其是在前端调样式的时候。
最初的使用方式还是安装好之后再命令行中输入命令去监听我css,html文件的变动，来实时刷新页面，当时用的命令时类似这样的,需要先切换到当前工作路径（我用的是代理方式所以有–proxy参数）。

browser-sync start –proxy “localhost” –files “./Shuff/.css, ./Shuffling/.html”

在没有接触gulp以前，每次需要执行命名去监听文件的变化，执行刷新，但是很麻烦，每次都输入的是同样的命令，于是乎，将它写成 [.bat] 文件放在桌面，每次需要的时候双击就行，这样更简单，更方便呢：
然后尝试了下，果然可以，只需要将相对路径改成绝对路径就行，随便给起个名字比如[sync.bat]文件的内容：

browser-sync start –proxy “localhost” –files “C:/wamp/www/Shuffling/.css, C:/wamp/www/Shuffling/.html”

嗯，这样省心多了，但是我还需要用编译sass, 还需要一个命令处理的文件，按照同样的方式它是这样的：

cd C:/wamp/www/htmlL
sass –watch home/sass:home/css –style compressed

这样似乎还不够方便，又查了一下，隐约记得在linux系统中一个命令只要给后边加上‘&’就可以在后台运行了，是不是windows也有同样的功能，查了一下可以这样做，start /b + .bat文件，然后同样尝试了用一个.bat调用sass和sync.

start /b sync.bat
start /b sass.bat

这样就行了，然后每次双击，就能同时监听sass变动生成css,又能使用browser-sync的功能来自动刷新浏览器了。

就这样用了几天，后来了解了gulp再也没这样用过了。

gulp也可以开server, 当监听的文件发生变动的时候也可以使用gulp-connect重新加载页面，这里需要安装和引用connect模块

var connect = require('gulp-connect');

需要server的任务

gulp.task('server', function() {
connect.server({
    root: '../html/',
    livereload: true
});
});

然后在css处理完成的pipe中顺便重新加载

gulp.task('sass-home', function() {
return gulp.src('./home/sass/*.scss')
    .pipe(sass())
    .pipe(minifyCSS())
    .pipe(gulp.dest('./home/css'))
    .pipe(connect.reload());
});

但是它的功能没有browser-sync丰富，不能够多浏览器同时响应页面的操作，比如你在一个浏览器中滚动页面的时候另外一个浏览器的该页面是不动的，也不能在局域网中的其它设备上测试。

browser-sync的gulp说明文档已经写好了使用方法，在gulpfile.js初始化任务的时候，需要清楚你使用的是代理的方式还是server静态服务器，我用的是代理，原因是静态服务器不能上传文件，应该不具备php或者java的环境。

var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

引入模块和reload方法，同样在管道流的时候使用css编译好的后期使用：

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

这样就可以在您的任务完成后调用reload，所有的浏览器将被告知的变化并实时更新。

附一个用来试验的gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var minifyCSS = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var rename = require('gulp-rename');
var connect = require('gulp-connect');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
/*  .pipe(connect.reload());  */

gulp.task('server', function() {
    connect.server({
        root: '../htmlL/',
        livereload: true
    });
});

gulp.task('browser-sync', function(){
    browserSync.init({
        proxy:'localhost',
        files:['./**/*.css','./**/*.html']
    });
});

gulp.task('copy-index', function() {
    return gulp.src('./home/index.html').pipe(gulp.dest('dist'));
});

// 指定文件
gulp.task('copy-image', function() {
    return gulp.src('./home/images/*.jpg').pipe(gulp.dest('./dist/images/'));
});

// 多个格式
gulp.task('copy-images', function() {
    return gulp.src('./home/images/*.{jpg,png,gif}')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/'));
});

gulp.task('copy-all', function() {
    return gulp.src('./home/images/**/*').pipe(gulp.dest('./dist/'));
});

gulp.task('data', function() {
    return gulp.src(['xml/*.xml', 'json/*.json']).pipe(gulp.dest('dist/data'));
});

// 排除
gulp.task('data-some', function() {
    return gulp.src(['xml/*.xml', 'json/*.json', '!json/secrit-*.json']).pipe(gulp.dest('dist/data'));
});

// 主任务
gulp.task('build', ['copy-image', 'data-some'], function() {
    console.log('编译成功');
});

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

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

// 合并js
gulp.task('scripts', function() {
    return gulp.src('./public/js/*.min.js')
        .pipe(concat('uzao.js'))
        .pipe(gulp.dest('./dist/'))
        .pipe(uglify())
        .pipe(rename('uzao.min.js'))
        .pipe(gulp.dest('./dist/'));
});

gulp.task('html-home', function() {
    return gulp.src('./home/*.html')
        .pipe(connect.reload());
});

gulp.task('html-front', function() {
    return gulp.src('./front/*.html')
        .pipe(connect.reload());
});

// watch
gulp.task('watch', function() {
    gulp.watch('./public/sass/*.scss', ['sass']);
    gulp.watch('./home/sass/*.scss', ['sass-home']);
    gulp.watch('./home/*.html', ['html-home']);
});

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