var 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了

browsersync实现网页实时刷新(修改LESS,JS,HTML时)的更多相关文章

  1. react修改app.js添加中文内容后中文部分乱码解决

    [问题]:配置完react后修改app.js内容时添加中文出现如下乱码的中文. [A解决]文档——文本编码——转换文本编码,在弹出窗口修改,确定,搞定 [B解决]首先在EditPlus内:工具——首选 ...

  2. 修改了JS代码,刷新网页后,加载的JS还是原来旧的?

    本地修改JS脚本后,刷新网页看一下修改后的执行效果,结果调试显示加载的JS还是原来旧的,反复刷新均无效,郁闷! 解决办法:清理一下浏览器缓存(长经验了!)     Ctrl+Shift+Del 清除G ...

  3. gulp 图片、样式、js、实时刷新等压缩gulpfile.js文件各个模块

    1.压缩tinypng图片   gulp-tinypng-nokey,但不压缩gif格式(另外一个gulp-imagemin压缩率不高,可以压缩gif格式) // 获取 gulp var gulp = ...

  4. 网页实时聊天之js和jQuery实现ajax长轮询

    众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,从而源源不段地获取信息. 一直以来的方式 ...

  5. [转]网页实时聊天之js和jQuery实现ajax长轮询 PHP

    网页实时聊天之js和jQuery实现ajax长轮询 众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的 ...

  6. grunt实现修改代码实时刷新浏览器

    grunt例子:https://github.com/Aquarius1993/gruntDemo grunt 实时刷新1:           1.安装chrome浏览器插件:liveReload ...

  7. gulp使用 实现文件修改实时刷新

    gulp例子:https://github.com/Aquarius1993/gulpDemo 淘宝镜像:$ npm install -g cnpm --registry=https://regist ...

  8. js获取当前时间并实时刷新

    效果如图: 代码如下: <html> <head> <title>js获取当前时间并实时刷新</title> <script> //页面加载 ...

  9. webpack-dev-server 搭建本地服务以及浏览器实时刷新

    一.概述开发项目中为了保证上线,开发项目是都需要使用localhost进行开发,以前的做法就是本地搭建Apache或者Tomcat服务器.有的前端开发人员 对服务器的搭建和配置并不熟悉,这个时候需要后 ...

随机推荐

  1. ajax——CORS跨域调用REST API 的常见问题以及前后端的设置

    RESTful架构是目前比较流行的一种互联网软件架构,在此架构之下的浏览器前端和手机端能共用后端接口. 但是涉及到js跨域调用接口总是很头疼,下边就跟着chrome的报错信息一起来解决一下. 假设:前 ...

  2. Linux 命令备忘录(CentOS 7)

    创建目录testdir: mkdir  testdir 进入目录testdir:cd testdir 在testdir中创建空文件 1:   touch 1 在testdir中创建空文件 2:   t ...

  3. Owin Self Host

    http://owin.org/ Owin 定义了webserver和webapplication之间的标准接口,目标就是为了解耦webapplication对webserver的依赖, 就是说以后可 ...

  4. iOS 创建一个可以点击并拖拽的Button

    HSCButton.h #import <UIKit/UIKit.h> @interface HSCButton : UIButton { CGPoint beginPoint; } @p ...

  5. linux c/c++

    string 字符串操作 操作数的都是 ( char * )型,操作数必须是指向字符串的指针("a"),不能是字符('a'),操作时不考虑末尾的'\0'. size_t strle ...

  6. iOS block

    主要内容: block基本声明格式 block访问区域变量 block代替代理 block基本声明格式: ^(传入的参数){具体代码}; 注: Block实体开头是"^",接着是由 ...

  7. 获取文本的编码类型(from logparse)

    import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java.io.F ...

  8. 3ds max旋转简化后模型

    简化后的模型无法与原场景直接匹配,因此需要以下步骤: 简化后的模型导入,原点在右上角 旋转后,方法是选中所有模型,右键->旋转 在偏移的x和y各输入180 还有做一些平移,微调 在导入整个she ...

  9. Mac 下locate命令使用问题WARNING: The locate database (/var/db/locate.database) does not exist.

    想在Mac下使用locate时,提醒数据库没创建: WARNING: The locate database (/var/db/locate.database) does not exist. To ...

  10. [转]ubuntu 下无法启动chrome

    这很不爽,google了半天也不知道答案(搜索到要重装chrome,可是我怎么都卸载不干净.....),最终解决方法如下: -------------------------------------- ...