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服务器.有的前端开发人员 对服务器的搭建和配置并不熟悉,这个时候需要后 ...
随机推荐
- powershell使用
主要语法点: -match -notmatch -replace -join -split -and -or -xor -not ! +.-.*./.% =.+=.-=.*=./=.%= -eq.-n ...
- RecyclerView的使用之多种Item加载布局
精益求精,为了更加透彻熟练得掌握,本文再次给大家介石介绍下如何利用RecyclerView实现多Item布局的加载,多Item布局的加载的意思就是在开发过程中List的每一项可能根据需求的不同会加载不 ...
- node的核心模块path
//导入模块path var path=require("path"); //path.basename :输出文件名+后缀 //console.log(path.basename ...
- Eclipse 一些小知识
快速查找未完成事项 eg: // TODO 通过模板格式化代码 Window --> Preferences --> Java --> Editor --> Template ...
- 解决java.lang.NoClassDefFoundError: org/objectweb/asm/util/TraceClassVisitor
方案一: <dependency> <groupId>asm</groupId> <artifactId>asm-all</artifactId& ...
- AngularJS 包含
在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 在 HTML 中,目前还不支持包含 HTML 文件的功能. 大多服务端脚本都支持包含文件功能 (SSI: Server Sid ...
- android include进来的组件 调用其子元素
include标签包裹着一个可复用的布局: <include layout="@layout/footer_detail" android:id="@+id/foo ...
- jQuery中的Ajax - Codeigniter版本
发送(view中): $.ajax({ type : 'post', url : 'add', data : { 'nickname':nickname, 'mobile':mobile, 'sex' ...
- 【leetcode】Palindrome Number
题目简述: Determine whether an integer is a palindrome. Do this without extra space. Some hints: Could n ...
- UWP学习记录4-设计和UI之控件和模式1
UWP学习记录4-设计和UI之控件和模式1 1.控件和事件简介 在 UWP 应用开发中,控件是一种显示内容或支持交互的 UI 元素. 控件是用户界面的构建基块. 我们提供了超过 45 种控件供你使用, ...