gulp 热更新第二篇 —— gulp-watch

LiveReload可以理解为即时刷新

实现原理：通过在本地开启一个websocket服务，检测文件变化，当文件被修改后触发livereload任务，推送消息给浏览器刷新页面。

// require那些install哪些就OK
var gulp = require("gulp"),
    cssmin = require("gulp-minify-css"),
    rename = require("gulp-rename"),
    connect = require("gulp-connect");

gulp.task("css", function () {
    gulp.src("./src/css/*.css")
        // 压缩
        .pipe(gulp.dest("./dist/css"))
        .pipe(cssmin())
        // 重命名
        // .pipe(rename(function (filename) {
        //     filename.basename += "min"
        // }))
        .pipe(gulp.dest("./dist/css"));
})

gulp.task("copy", function () {
    gulp.src("./src/*.html")
        .pipe(gulp.dest("./dist"));
    gulp.src("./src/css/*.css")
        .pipe(gulp.dest("./dist/css"));
})

gulp.task("watch", function () {
    gulp.watch("./src/**/*.*", ["copy", 'css']);
    gulp.watch("./dist/**/*.*", ["reload"]);
})

gulp.task("reload", function () {
    gulp.src("./dist/*.html")
        .pipe(connect.reload());
})

gulp.task("server", function () {
    connect.server({
        root: "./dist",
        livereload: true,
        port: 8080
    })
})

gulp.task("default", ["server", "watch"]);


// gulp启动任务后，终端显示在8080端口开启了一个http服务，而在35729端口开启了LiveReload服务，实际为一个WebSocket服务。
// 打开页面，可以看到原始页面中插入了livereload的js文件。
// 在network中WS下可以看到WebSocket的消息。
// .pipe(gulp.dest("./dist/css")) 目前这句要写两遍才压缩成功，目前还没弄清楚原因

gulp 热更新第二篇 —— gulp-watch

推荐阅读更多精彩内容