gulp实现自动watch(gulp-watch)和自动刷新页面(browser-sync)

1、直接看 gulpfile.js 配置文件

var gulp = require('gulp');
var watch = require('gulp-watch');
var sass = require('gulp-sass');
var clean = require('gulp-clean');          // 清空文件夹
var browserSync = require('browser-sync').create();     // 用来打开一个浏览器

var html_path = 'src/**/*.html';
var css_libs_path = 'src/css/**/*.css';
var sass_libs_path = 'src/css/**/*.scss';

gulp.task('watch', function () {
    w('./src/**/*.html', 'html');
    w(css_libs_path, 'css_libs');
    w(sass_libs_path, 'sass_libs');

    function w(path, task){
        watch(path, function () {
            gulp.start(task);
            browserSync.reload();
        });
    }
});

// 清空dist文件夹
gulp.task('clean', function(){
    return gulp.src(['dist/*'])
        .pipe(clean());
});

// html模板处理
gulp.task('html', function() {
    return gulp.src(html_path)
        .pipe(gulp.dest('dist'));
});

// 打包css
gulp.task('css_libs', function(){
    return gulp.src(css_libs_path)
        .pipe(gulp.dest('dist/css'));
});

// 打包sass
gulp.task('sass_libs', function() {
    return gulp.src(sass_libs_path)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('dist/css'));
});

// 启本地服务，并打开浏览器
gulp.task('browser', function(){
    browserSync.init({
        server: 'dist'    // 访问目录，自动指向该目录下的 index.html 文件
        // proxy: "你的域名或IP"    // 设置代理
    });
});

// 加入'watch'任务
gulp.task('default', ['clean'], function() {
    gulp.start(['html', 'css_libs', 'sass_libs', 'browser', 'watch'])
});

2、目录结构

目录结构