gulp之本地服务器搭建、gulp-connect热更新以及综合watch各个文件实现热更新等

一、话不多说直接上代码

//引入
var gulp = require("gulp");
var sass = require("gulp-sass");
var tinypng_nokey = require('gulp-tinypng-nokey');
var webServer = require('gulp-connect');
//定义任务 控制台执行例如：gulp sass

gulp.task("sass",function(){
    //引入源文件
    return gulp.src("app/scss/style.scss")
    //执行sass编译
    .pipe(sass())
    //执行输出
    .pipe(gulp.dest("app/css"))
    .pipe(webServer.reload())
})
// 优化压缩图片
gulp.task('tp', function() {
    gulp.src('app/images/img/*.{png,jpg,jpeg,gif,ico}')
        .pipe(tinypng_nokey ())
        .pipe(gulp.dest('dist/images'));
})
//引入html并刷新
gulp.task("html",function(){
    gulp.src("app/*.html")
        .pipe(webServer.reload())
})
//监听
gulp.task("watch",function(){
    gulp.watch("app/*.html",["html"])
    gulp.watch("app/**/*scss",["sass"])
})
gulp.task("connect",function(){
    webServer.server({
        root:"./app",
        port: 80,
        host: 'jiangqi.dev',
        livereload: true,
    });
})
gulp.task("default",["connect","watch"])

1、这里root设置根目录；

2、host设置需要在c盘下面找到hosts文件并将域名映射ip设置问本地ip地址；

3、注意各个人物执行的顺序，并且注意刷新任务执行的位置。

4、参考博客：https://blog.csdn.net/shenlei19911210/article/details/52415941