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