browsersync实现网页实时刷新(修改LESS,JS,HTML时)

2

以下是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刷新,它会自动刷新,如果配合一个显示器,一边修改代码,一边自动刷新,卧槽 想想都很酷

你可能感兴趣的

苏生不惑 · 2015年07月05日

直接gulp运行就是吗?

+1 回复

哇哈哈冰红茶 作者 · 2015年07月07日

是的,不过路径你要修改为你的路径

+1 回复

zero23715 · 2015年11月02日

你好,我碰到个问题,根目录下的index.html发生修改就会触发Browsersync的页面刷新,但是如果是在根目录下的/src/index.html发生修改,就无法刷新页面,你有碰到过这种情况吗?

+1 回复

janmi · 2015年06月25日

使用browserSync是否需要在浏览器安装插件?

回复

哇哈哈冰红茶 作者 · 2015年06月26日

不需要

回复

ikov聪 · 2016年01月23日

你好,我按照你这种方法,修改html的时候会刷新好多次,不过我的路径是这样
HTML : "./*/.html",

    LESS : "./**/*.less",
    CSS : "./",
    JS : "./**/*.js"

回复

Pneumatic_1995 · 2017年11月17日

你好,请问你知道启动了node之后如何配置browserSync吗

回复

载入中...