浏览器自动刷新系列------browser-sync+gulp

npm install -g --save-dev gulp browser-sync

//加载gulp模块
var gulp = require(‘gulp‘);
//加载browser-sync模块
var browserSync = require(‘browser-sync‘).creat();
var reload = browserSync.reload;
//加载sass模块
var sass = require(‘gulp-sass‘);
//加载pug模块
var pug = require(‘gulp-pug‘);
//加载gulp-autoprefixer模块
var autoprefixer = require(‘gulp-autoprefixer‘);


/**
 * 这里静态服务器 + 监听 scss/pug/js 文件
 */
gulp.task(‘server‘,[‘sass‘,‘pug‘],function(){
    browserSync.init({
        server:‘./‘, //这里指的是根目录，如果你的index.html在根目录下，会直接打开index页面，不然会显示Get Not，自己写路径就行
        port:8081  //默认打开localhost:3000,现在改成localhost:8081
    });
    
    //监听 scss/pug/js 文件
    gulp.watch(‘sass/**/*.scss‘,[‘sass‘]);
    gulp.watch(‘jade/**/*.pug‘,[‘pug‘]);
    gulp.watch(‘page/**/*.js‘).on(‘change‘,reload);
});

/**
 * 编译sass
 */
gulp.task(‘sass‘,function(){
    return gulp.src(‘sass/**/*.scss‘)
        .pipe(sass().on(‘error‘, plugins.sass.logError))
        .pipe(autoprefixer(‘last 2 version‘, ‘safari 5‘, ‘ie 8‘, ‘ie 9‘,       ‘opera 12.1‘, ‘ios 6‘, ‘android 4‘)) //这个插件是用来加浏览器前缀的
        .pipe(gulp.dest(‘./page‘))
        .pipe(reload({stream:true}));
});

/**
 * 编译pug
 */
gulp.task(‘pug‘,function(){
    return gulp.src(‘jade/**/*.pug‘)
        .pipe(pug({pretty:true}))
        .pipe(gulp.dest(‘./page‘))
        .pipe(reload({stream:true}));
});

/**
 * 默认运行
 */
gulp.task(‘default‘,[‘server‘]);

gulp