前提条件：

1. 安装了node
2. 安装了git
3. 安装了gulp3 # 具体操作：

1. 打开git bash 安装gulp-connect

$ npm install gulp-connect --save-dev

gulp-connect：开启本地服务器

2.在根目录创建gulpfile.js

3.在gulpfile内引入文件

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

4.添加task任务

var folder = {
    'src':'src/',
    'dist':'dist/'
}
gulp.task("html",function(){
    gulp.src(folder.src+"html/*")
    .pipe(htmlclean())
    .pipe(gulp.dest(folder.dist+"html/"))
})

gulp.task("css",function(){
    gulp.src(folder.src + "css/*")      // 读取src/css文件夹下面的所有文件
    .pipe(less())                       // 将less转译成css
    .pipe(autoprefixer({                // 自动给css添加浏览器前缀
        browsers: ['last 20 versions'] 
    }))
    .pipe(cleanCss())                   // css代码压缩
    .pipe(gulp.dest(folder.dist+"css/"))  // 输出代码到dist/css目录下面
})

gulp.task("images",function(){
    gulp.src(folder.src+"images/*") // 读取src/images文件夹下面的所有文件
    .pipe(imagemin())               // 图片压缩
    .pipe(gulp.dest(folder.dist+"images/")) // 输出代码到dist/images目录下面
})
gulp.task("js",function(){
    gulp.src(folder.src + "js/*")       // 读取src/js文件夹下面的所有文件
    .pipe(babel())                               // 使用babel
    .pipe(uglify())                     // js代码压缩
    .pipe(stripDebug())                 // 去除全部调试语句
    .pipe(gulp.dest(folder.dist+"js/")) // 输出代码到dist/js目录下面
})

核心操作：

gulp.task("server",function(){
    connect.server({                // 链接服务器
        port:9999,                  // 设置服务器端口为9999
        livereload:true             // 热替换开启
    })
})
gulp.task("watch",function(){
    
    // 分别监听src/html/路径、src/css/路径、src/js/路径下面的所有文件
    // 如果改动 则执行数组里面的任务
    gulp.watch("src/html/*",["html"])   
    gulp.watch("src/css/*",["css"])
    gulp.watch("src/js/*",["js"])
    gulp.watch("src/images/*",["images"])
    
})

5.加入启动队列

gulp.task("default", ["html", "images", "css", "server", "js", "watch"])

6.启动gulp，完成

$gulp