文档章节

gulpfile.js 中 BrowserSync 配置方法

切图小弟
 切图小弟
发布于 2016/12/07 16:08
字数 151
阅读 38
收藏 1
点赞 0
评论 0
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var less = require("gulp-less");
var reload = browserSync.reload;
gulp.task('browser-sync',function(){
    browserSync.init({
        server:{
            baseDir: './'
        },
        port: 2020,
        // proxy: "http://localhost:2020/project-prepare/"
    }) 
});
gulp.task("gulp-less", function() {
	gulp.src("./src/less/*.less")
		.pipe(less())
		.pipe(gulp.dest("./css"));
});
gulp.task("watch", function() {
	gulp.watch(["./src/less/*.less"], ["gulp-less"]);
	gulp.watch(["./*.html", "./js/*.js", "./css/*.css"], reload);
})
gulp.task("default", ["browser-sync", "watch"]);

这里额外使用了 gulp-less 用于对 less 文件进行实时编译转换。

其中 browserSync.init 配置参数中使用 proxy 来替换 server 和 port 参数是用来代理本地已有的服务器,即不使用 browserSync 提供的服务器。

还可以传入 browser: "chrome" 用来设置默认打开的浏览器。

© 著作权归作者所有

共有 人打赏支持
切图小弟
粉丝 0
博文 22
码字总数 2808
作品 0
杭州
程序员
dashboard开发环境搭建

1.dashboard开发环境搭建(Linux -ubuntu 16.04.2) 参考:dashboard工程目录下的requirements-installation.md和getting-started.md unbuntu安装 & java7安装 1)ubuntu 16.04.2 下载 地址:h......

v1-alpha
2017/10/31
0
0
gulp安装流程、使用方法及cmd常用命令导览

gulp安装流程、使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结     一、名词介绍: Npm——node包管理工具 一开始我不理解,包管理工具是什么鬼。后来用到的gulp也好,...

鋒o丫头
2017/07/14
0
0
使用gulp和browserSync实现页面自动刷新

在平时开发时,我用过很多gulp的自动刷新工具,昨天试了下browser-sync这款插件,感觉确实不错,分享给大家。 gulp和browser-sync的安装就不多介绍了,下面给出命令 将下面的文件写入文件...

阿振
2016/06/25
116
1
关于gulp中自动添加版本号及Html文件应用路径替换的问题

最近项目做了一段时间了,为了测试的准确性及节约更多的时间,我们需要将前端中静态资源的引用加上hash版本号,以方便测试在工作时不用老是去清理缓存,因为项目工程本来就使用了Gulp,所以就...

阿振
2016/10/16
1K
8
如何基于yeoman快速编写脚手架工具(系列:使用篇上)

如何基于yeoman快速编写脚手架工具(系列:使用篇上) 由于关于yeoman编写脚手架的文章太少,所以推出此文,注意本文介绍的yoeman generator-generator是基于 0.8.0以前的版本,0.1.0以后的版...

刘学炜
2016/01/23
515
0
gulp自动刷新浏览器

项目本地后端开发语言是是基于apache的php,域名为cloud.xxx.com。刚开始想实现浏览器F5自动刷新使用到的是grunt和livereload插件,gulp也有对应的方法,移步「gulp教程之gulp-livereload」。...

cobish
2016/04/14
1K
0
Gulp自动添加版本号

推荐使用gulp-rev + gulp-rev-collector是比较方便的方法,结果如下: 但是由于公司发布系统限制,如果用上面方法实现,每次更新都会积压过多过期无用的文件,我们预期效果是: 怎么破?改上面两...

IT追寻者
2016/05/03
77
0
打造前端 Deepin Linux 工作环境——配置静态服务器

打造前端 Deepin Linux 工作环境——配置静态服务器 我们前面虽然已经安装了一个 的集成服务器环境,但是这个东西实在是太重了。一般情况下,我们写个或者 居然要跑那个东西我实在是优点受不...

FungLeo
2017/11/04
0
0
基于Node.js的自动化工具Gulp

基于Node.js的自动化工具Gulp What is gulp? gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用...

笔阁
2015/10/29
913
1
我想用手机测试自己写的web页面,该怎么做?

作者:不爱吃西红柿的鱼 链接:https://www.zhihu.com/question/37361845/answer/71674280 来源:知乎 一、IOS 移动端 (Safari开发者工具) 手机端:设置 → Safari → 高级 → Web 检查器 ...

hhj187
2016/10/16
26
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

告警系统主脚本、告警系统配置文件、告警系统监控项目

告警系统主脚本 为方便需要,所有的shell脚本放到 /usr/local/sbin/ 目录下 切换到 /usr/local/sbin/ 目录下,创建告警系统脚本 #!/bin/bash#Written by aming.# 是否发送邮件的开关(1表...

Zhouliang6
3分钟前
1
0
不要再问我跨域的问题了

原文链接:web.jobbole.com 【RTC实时互联网大会 限时免费 马上报名】www.bagevent.com 写下这篇文章后我想,要不以后就把这种基础的常见知识都归到这个“不要再问我XX的问题”,形成一系列内...

阿K1225
5分钟前
0
0
Tomcat配置虚拟路径

<?xml version="1.0" encoding="UTF-8"?> <Context docBase="/data/dispute_https/headPortrait/" path="/headPortrait" reloadable="true"/> <!-- 该文件名为headPortrait.xml,放在${tomca......

Helios51
6分钟前
0
0
开源PaaS Rainbond 3.6.1 Released

本次3.6.1版本更新,重点修复了3.6.0版本部分情况下会出现的BUG,同时改进了内部市场、参数验证、历史消息等功能,详细更新记录如下—— 3.6.1 功能改进 云帮初次使用跳转至注册页面 消息添加...

好雨云帮
7分钟前
0
0
Unsupported major.minor version 52.0

执行代码的jdk版本 低于 编译的jdk版本 其中52.0 对应的就是 jdk1.8版本。

@林文龙
7分钟前
0
0
聊聊spring cloud的AbstractLoadBalancingClient

序 本文主要研究一下spring cloud的AbstractLoadBalancingClient AbstractLoadBalancingClient spring-cloud-netflix-ribbon-2.0.0.RELEASE-sources.jar!/org/springframework/cloud/netfli......

go4it
8分钟前
0
0
博客改版通知

先上博客地址 --> http://metaphors.name 最近将博客从 Jekyll 迁到了 Hexo,所以简书、开源中国、博客园、CSDN文章中的的部分图片丢了,原文链接也不可用了,不过没关系,原文链接都会转到博...

Metaphors
8分钟前
0
0
vue基础知识练习

一、Hello World <div id="itany">{{msg}} <!-- 两对大括号{{}}称为模板,用来进行数据的绑定显示在页面中 --> </div><script src="js/vue.js"></script><script>var vm=new Vue({......

一个yuanbeth
12分钟前
0
0
spring @Transactional注解参数详解

原文:事物注解方式: @Transactional 当标于类前时, 标示类中所有方法都进行事物处理 , 例子: 1 @Transactional public class TestServiceBean implements TestService {} 当类中某些方法不需...

binhu
15分钟前
0
0
CORS 跨域实践

本文首发于个人微信公众号《andyqian》,期待你的关注~ 前言 系统通常都是由单体应用逐渐演化而来,演化成为前后端分离的分布式应用。在享受分布式系统带来的诸多好处之时,随之而来的也有不...

andyqian
22分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部