文档章节

gulpfile.js 中 BrowserSync 配置方法

切图小弟
 切图小弟
发布于 2016/12/07 16:08
字数 151
阅读 38
收藏 1
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
第210天:node、nvm、npm和gulp的安装和使用详解

一、node 1、什么是node? 它不是JS文件,也不是JS框架,而是Server side JavaScript runtime,当服务端的一个JS文件运行时,会被NODE拦截,在NODE中运行JS代码。JS由ES(ECMAScript),DOM...

半指温柔乐
04/01
0
0
关于gulp中自动添加版本号及Html文件应用路径替换的问题

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

阿振
2016/10/16
1K
8

没有更多内容

加载失败,请刷新页面

加载更多

如何通过 J2Cache 实现分布式 session 存储

做 Java Web 开发的人多数都会需要使用到 session (会话),我们使用 session 来保存一些需要在两个不同的请求之间共享数据。一般 Java 的 Web 容器像 Tomcat、Resin、Jetty 等等,它们会在...

红薯
今天
3
0
C++ std::thread

C++11提供了std::thread类来表示一个多线程对象。 1,首先介绍一下std::this_thread命名空间: (1)std::this_thread::get_id():返回当前线程id (2)std::this_thread::yield():用户接口...

yepanl
今天
3
0
Nignx缓存文件与动态文件自动均衡的配置

下面这段nginx的配置脚本的作用是,自动判断是否存在缓存文件,如果有优先输出缓存文件,不经过php,如果没有,则回到php去处理,同时生成缓存文件。 PHP框架是ThinkPHP,最后一个rewrite有关...

swingcoder
今天
2
0
20180920 usermod命令与用户密码管理

命令 usermod usermod 命令的选项和 useradd 差不多。 一个用户可以属于多个组,但是gid只有一个;除了gid,其他的组(groups)叫做扩展组。 usermod -u 1010 username # 更改用户idusermod ...

野雪球
今天
3
0
Java网络编程基础

1. 简单了解网络通信协议TCP/IP网络模型相关名词 应用层(HTTP,FTP,DNS等) 传输层(TCP,UDP) 网络层(IP,ICMP等) 链路层(驱动程序,接口等) 链路层:用于定义物理传输通道,通常是对...

江左煤郎
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部