browsersync實現網頁實時刷新(修改LESS,JS,HTML時)

如下是gulpfile.js內容

JavaScriptvar gulp = require("gulp"),
    less = require("gulp-less"),
    browserSync = require("browser-sync"),
    path = {
        HTML : "html/*.html",
        LESS : "less/*.less",
        CSS : "css",
        JS : "js/*.js"
    };

gulp.task("serve", ["less", "js-watch", "html"], function() {
    browserSync.init({
        server : "./"
    });

    gulp.watch(path.LESS, ["less"]);
    gulp.watch(path.JS, ["js-watch"]);
    gulp.watch(path.HTML, ["html"]);
    gulp.watch(path.HTML).on("change", function() {
        browserSync.reload;
    });
});


gulp.task("less", function() {
    gulp.src(path.LESS)
        .pipe(less())
        .pipe(gulp.dest(path.CSS))
        .pipe(browserSync.stream());
})


gulp.task("js-watch", function() {
    gulp.src(path.JS)
    .pipe(browserSync.stream());
})

gulp.task("html", function() {
    gulp.src(path.HTML)
    .pipe(browserSync.stream());
})

gulp.task("default", ["serve"])

//若是想添加對CSS的監聽,想上面監聽less html js 同樣
//我既然用了less就不用監聽css了

如今當修改 JS LESS HTML 任一文件,網頁無需本身手動F5 或者 command+R刷新,它會自動刷新,若是配合一個顯示器,一邊修改代碼,一邊自動刷新,臥槽 想一想都很酷