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

时间:2023-02-21 22:35:07
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. eclipse中 将java项目转换为web项目

    来自:http://jadethao.iteye.com/blog/1331308 eclipse中 将java项目转换为web项目 1.找到项目工作空间目录,打开.project文件,并修改文件,  ...

  2. Android中的Keyevent

    使用Adb shell command直接送key event給Android adb shell input keyevent 7 # for key '0' adb shell input key ...

  3. Java8初体验(二)Stream语法详解

    感谢同事[天锦]的投稿.投稿请联系 tengfei@ifeve.com 上篇文章Java8初体验(一)lambda表达式语法比 较详细的介绍了lambda表达式的方方面面,细心的读者会发现那篇文章的例 ...

  4. ajax post方法

    定义和用法 post() 方法通过 HTTP POST 请求从服务器载入数据. 语法 jQuery.post(url,data,success(data, textStatus, jqXHR),dat ...

  5. 线程间通信--生产者消费者 升级版JDK5

    import java.util.concurrent.locks.*; /*1.新的解锁,上锁操作,据说是jdk5.0升级版,以前的枷锁,解锁都是隐藏的,默认的,现在变成显式 2.新的异常处理方式  ...

  6. 关于oracle数据库中获取版本号类数据最大值的sql

    目前还在高度加班中,但是本次内容怕自己忘记,好不容易解决的,所以赶紧先随便抽点时间记录下,也没来得及考虑效率什么的优化问题,免得以后忘记了. 测试库结构如下: 表名为 testtab 字段名为test ...

  7. Jquery动态添加&sol;删除表格行和列

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Xamarin Essentials应用教程文件系统FileSystem

    Xamarin Essentials应用教程文件系统FileSystem 文件系统用于管理设备内的各类文件.通过文件系统,应用程序可以创建永久文件和临时文件,也可以获取预先打包的文件,如预设数据库文件 ...

  9. SQL 关联外键报错类型不匹配

    如题,关联外键的时候,报错类型匹配.但是两个 类型都是int sql 如下: CREATE TABLE IF NOT EXISTS `alert_receiver_map` ( `id` INT UN ...

  10. 比原链Bytom错误码一览

    0XX API错误 BTM000", "Bytom API Error" 非比原标准错误 BTM001", "Request timed out&qu ...