gulp实战(5) - 项目整体自动化打包并同步浏览器

本文志在演示项目整体打包过程，而并没有将项目中的文件进行压缩或其它处理，各个文件类型的处理过程可以参考前四章

gulp实战(1) - 自动化打包JS文件（完整版）
gulp实战(2) - 自动化打包CSS文件（完整版）
gulp实战(3) - 自动化打包HTML文件（完整版）
gulp实战(4) - 自动化打包图片（完整版）

var gulp        = require('gulp'),
    clean       = require('gulp-clean'),
    pump        = require('pump'),
    sequence    = require('run-sequence'),
    browserSync = require('browser-sync').create();

var config = {
    src: "src",
    dist: "build"
}

/**
 * 清理目标目录
 */
gulp.task('clean', function(cb) {
    pump([
        gulp.src(config.dist),
        clean()
    ], cb)
})

/**
 * 执行打包
 */
gulp.task('package', [], function(cb) {

    pump([
        // 获取原目录下所有的html文件
        gulp.src(config.src + "/**/*.*"),
        // 输出至目标目录
        gulp.dest(config.dist)

    ], cb);

});

/**
 * 开启浏览器
 */
gulp.task('browserSync', function() {
    browserSync.init([
            "src/**/*.*", 
        ], {
        server: {
            baseDir: "./build"
        }
    });
});

/**
 * 监控
 */
gulp.task('watch', ['browserSync'], function(cb) {

    gulp.watch(config.src + "/**/*.*", ['package']);

});

/**
 * 开始执行
 */
gulp.task('default', function(cb) {
    sequence('clean', 'package', 'watch', cb);
});