LiveReload可以理解為即時刷新

實現(xiàn)原理：通過在本地開啟一個websocket服務，檢測文件變化，當文件被修改后觸發(fā)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")) 目前這句要寫兩遍才壓縮成功，目前還沒弄清楚原因