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")) 目前这句要写两遍才压缩成功，目前还没弄清楚原因
