gulp实现的多浏览器同步刷新工具

　　在项目根目录中，创建一个gulpfile.js的文件，其作用是命令行中执行 gulp 任务名   时，会执行gulpfile.js中的一个同名任务。

var gulp = require('gulp');
var less = require('gulp-less');  //less转化为css
var cssnano = require('gulp-cssnano');  //css压缩
var browserSync = require('browser-sync').create(); //多浏览器同步
var htmlmin = require('gulp-htmlmin');  //压缩html
var concat = require('gulp-concat');    //合并不同的js文件
var uglify = require('gulp-uglify');    //js压缩混淆


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

//刷新css
gulp.task('style',function(){
    gulp.src('src/styles/*.less')
    .pipe(less())
    .pipe(cssnano())
    .pipe(gulp.dest('dist/css/'))
    .pipe(browserSync.reload({
                 stream:true
           }));
});

//html去除多余空格
gulp.task('minify',function(){
           gulp.src('src/*.html')
           .pipe(htmlmin({collapseWhitespace:true}))
           .pipe(gulp.dest('dist'))
           .pipe(browserSync.reload({
                 stream:true
           }));
});
//js合并 压缩混淆
gulp.task('script',function(){
    gulp.src('src/scripts/*.js')
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(browserSync.reload({
        stream:true     //浏览器重新载入
    }));
});

//复制照片
gulp.task('image',function(){
    gulp.src('src/imgs/*.*')
      .pipe(gulp.dest('dist/imgs'))
      .pipe(browserSync.reload({
            stream:true
      }));
});

//多浏览器同步刷新的主要部分，启动服务后，src中的文件有变动，就会触发watch，从而执行相应的任务。
gulp.task('serve',function(){
    browserSync.init({
        server:{
            baseDir : 'dist'
        }
    },function(err,bs){
        console.log(bs.options.getIn(['urls','local']));
    });
    gulp.watch('src/styles/*.less',['style']);
    gulp.watch('src/*.html',['minify']);
    gulp.watch('src/scripts/*.js',['script']);
    gulp.watch('src/imgs/*.*',['image']);
});