browsersync实现网页实时刷新(修改LESS,JS,HTML时)
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时)的更多相关文章
- react修改app.js添加中文内容后中文部分乱码解决
[问题]:配置完react后修改app.js内容时添加中文出现如下乱码的中文. [A解决]文档——文本编码——转换文本编码,在弹出窗口修改,确定,搞定 [B解决]首先在EditPlus内:工具——首选 ...
- 修改了JS代码,刷新网页后,加载的JS还是原来旧的?
本地修改JS脚本后,刷新网页看一下修改后的执行效果,结果调试显示加载的JS还是原来旧的,反复刷新均无效,郁闷! 解决办法:清理一下浏览器缓存(长经验了!) Ctrl+Shift+Del 清除G ...
- gulp 图片、样式、js、实时刷新等压缩gulpfile.js文件各个模块
1.压缩tinypng图片 gulp-tinypng-nokey,但不压缩gif格式(另外一个gulp-imagemin压缩率不高,可以压缩gif格式) // 获取 gulp var gulp = ...
- 网页实时聊天之js和jQuery实现ajax长轮询
众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,从而源源不段地获取信息. 一直以来的方式 ...
- [转]网页实时聊天之js和jQuery实现ajax长轮询 PHP
网页实时聊天之js和jQuery实现ajax长轮询 众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的 ...
- grunt实现修改代码实时刷新浏览器
grunt例子:https://github.com/Aquarius1993/gruntDemo grunt 实时刷新1: 1.安装chrome浏览器插件:liveReload ...
- gulp使用 实现文件修改实时刷新
gulp例子:https://github.com/Aquarius1993/gulpDemo 淘宝镜像:$ npm install -g cnpm --registry=https://regist ...
- js获取当前时间并实时刷新
效果如图: 代码如下: <html> <head> <title>js获取当前时间并实时刷新</title> <script> //页面加载 ...
- webpack-dev-server 搭建本地服务以及浏览器实时刷新
一.概述开发项目中为了保证上线,开发项目是都需要使用localhost进行开发,以前的做法就是本地搭建Apache或者Tomcat服务器.有的前端开发人员 对服务器的搭建和配置并不熟悉,这个时候需要后 ...
随机推荐
- Okhttp3的简单使用
1.get请求: /** * *okhttp get请求 * */ public class MainActivity extends AppCompatActivity { private stat ...
- gen_server port 调用receive_match 问题
问题由来 前些天对系统做了一个优化,将原来从queue 轮询刷出数据后每条消息一个 spawn 进程单独处理,修改为批量刷出.一条一条刷轮询刷 queue 存在问题:刷queue 进程太多时,占用CP ...
- Ninject学习(一) - Dependency Injection By Hand
大体上是把官网上的翻译下而已. http://www.ninject.90iogjkdcrorg/wiki.html Dependency Injection By Hand So what's Ni ...
- 48. 二叉树两结点的最低共同父结点(3种变种情况)[Get lowest common ancestor of binary tree]
[题目] 输入二叉树中的两个结点,输出这两个结点在数中最低的共同父结点. 二叉树的结点定义如下: C++ Code 123456 struct BinaryTreeNode { int ...
- python 3.5: TypeError: a bytes-like object is required, not 'str'
出现该错误往往是通过open()函数打开文本文件时,使用了'rb'属性,如:fileHandle=open(filename,'rb'),则此时是通过二进制方式打开文件的,所以在后面处理时如果使用了s ...
- AnyImgUpload
@{ ViewBag.Title = "ImgForAny"; Layout = null; } <h2>ImgForAny</h2> <script ...
- sharepoint关键位置
GAC:C:\Windows\assembly,也就是部署的位置: ISAPI位置,SharePoint API:C:\Program Files\Common Files\microsoft sha ...
- ModelMapper 中高级使用 java
ModelMapper 是一个java对象自动映射的第三方架包,用起来很方便,配合阿里的frstjson可以极大简化后台代码. 但是ModelMapper 中文使用说明很少,官网http://mode ...
- (转)REDIS各项配置参数介绍
# 默认情况下,redis不是在后台模式运行的,如果需要在后台进程运行,把该项的值更改为yes,默认为no daemonize:是否以后台daemon方式运行 # 如redis服务以后台进程运行的时候 ...
- 3.2 配置构建Angular应用——简单的笔记存储应用
本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...