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. amazeui折叠面板智能化展开

    2016年12月12日 21:05:18 星期一 场景: 我拿这个组件用作管理后台的侧边栏 效果: 根据当前访问的url不同, 展开不同的面板 amazeui折叠面板 js代码: <script ...

  2. 2015 史考特(Scottrade)开户指南 + 招商银行香港一卡通汇款【图文教程】

    最近刚开始炒美股.总的来说分为两步:一是开户,即选一个美股券商开设股票交易账户:二是汇款注资,把人民币换成美元转账到股票交易账户上.上述第一点其实相对简单,美股券商大多都对美国以外的外国人开放申请,且 ...

  3. gdb 调试多线程

    基本i threads 等操作略过,只谈线程同步.异步控制: 先点到,gdb attach到主线程t1 时,所有线程都会停止,所谓同步异步效果,是指在apply continue到所有线程之后, 再切 ...

  4. vector

    .vector是一个能够存放任意类型的动态数组,能够增加和压缩数据. .vector容器最擅长的工作是: 利用位置索引存储容器中的单个元素. 以任何顺序迭代容器中的元素. 在容器的末尾追加和删除元素. ...

  5. oracle中trunc()和to_char()函数用法

    -----trunc(for date) select sysdate from dual; --当前时间  2016/9/7 10:32:04select trunc(sysdate) from d ...

  6. webstorm添加*.vue文件代码提醒支持webstorm支持es6vue里支持es6写法

    本文转自:http://www.lred.me/2016/01/07/webstorm%E6%B7%BB%E5%8A%A0-vue%E6%96%87%E4%BB%B6%E6%94%AF%E6%8C%8 ...

  7. C#Linq技术中SelectMany(...)的内部实现推测

    对于声明为:public static IEnumerable<TResult> SelectMany<TSource, TResult>(this IEnumerable&l ...

  8. 惊闻Java要收费之后

    今天看到朋友圈里的文章 <Oracle终于要向Java的非付费用户开枪了>,被这个标题吓了一跳,还以为Java要全面收费了.又被标题党骗了. 但是仔细想想,以Oracle公司的尿性,没准哪 ...

  9. UVA 10692 Huge Mods(指数循环节)

    指数循环节,由于a ^x = a ^(x % m + phi(m)) (mod m)仅在x >= phi(m)时成立,故应注意要判断 //by:Gavin http://www.cnblogs. ...

  10. Jenkins配置自动发送邮件,成功!

    Jenkins自动发送邮件配置: 打开"系统管理"--"系统设置" 在"Jenkins Location"设置系统管理员地址(重要:不能省略 ...