文档章节

使用gulp和browserSync实现页面自动刷新

阿振
 阿振
发布于 2016/06/25 00:52
字数 204
阅读 147
收藏 0

在平时开发时,我用过很多gulp的自动刷新工具,昨天试了下browser-sync这款插件,感觉确实不错,分享给大家。

gulp和browser-sync的安装就不多介绍了,下面给出命令

$ cnpm install --save-dev gulp browser-sync

将下面的文件写入gulpfile.js文件

'use strict';

// 先引入依赖模块
var gulp = require("gulp"),
    browserSync = require("browser-sync");


// 自动刷新 browser-sync start
gulp.task('browser',function(){
  browserSync({
    // host: 172.16.157.1,
    port: 3000,
    open: true,
    // 路径显示/src开始
    startPath: "/src",
    //timestamps:false,
    server: {
      directory: true,
      routes: {
        '/src': "./src/index.html"
      },
      middleware: function(req,res,next){
        console.log("中间件");
        next();
      },
      baseDir: './'
    },
    // 指定浏览器
    // browser: "google chrome" // 或  ["google chrome","firefox"]
    // 延迟刷新,默认0
    reloadDelay: 1,
    // 是否载入css修改,默认true
    injectChanges: false
  });
});
gulp.task('bro',function(){
  gulp.src('./src/**')
  .pipe(browserSync.reload({stream:true}));
});
gulp.task('default',['bro','browser'],function(){
  gulp.watch('./src/**',['bro']);
});
// 自动刷新 browser-sync end

© 著作权归作者所有

共有 人打赏支持
阿振
粉丝 10
博文 55
码字总数 58791
作品 0
成都
高级程序员
加载中

评论(1)

zxl78585
zxl78585
毕竟,把人家惹哭了我还不知道该怎么去哄
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
第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自动刷新浏览器

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

cobish
2016/04/14
1K
0
重构构建的平凡之路

欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:李旦 导语 刚开始做前端的时候,一直以为切好页面是重构的全部职责,在切好页面的前提,增加页面交互,这样已经能到重构的顶...

腾讯云社区
2017/11/29
0
0
WEB前端 -“懒人”养成计划

引言 作为一名码农,更作为一名页面仔,我只想说:哪一个程序员,不想在写代码的时候偷点懒?当然这个懒,不是指那种当个纯粹的搬运工(CTRL+C,CTRL+V大神),而是用更少的时间去完成日常的工...

力谱宿云
2016/07/14
1K
5

没有更多内容

加载失败,请刷新页面

加载更多

下一页

nginx模块学习六 add_header 跨域访问

语法 Syntax: add_header name value [always];Default: --Context:http,server,location,if in location 例:/etc/nginx/conf.d/default.conf server {    listen       80; ......

Romanceling
今天
0
0
SpringBoot初探

#SpringBoot初探 三种创建SpringBoot项目的方式: 第一种:使用IDEA创建maven项目,选择maven-archetype-quickstart; 第二种:使用IDEA创建Spring Initializer,选择web组件; 第三种:使用...

向码而生
今天
2
0
IO

JAVA中IO技术:BIO、NIO、AIO 1、同步异步、阻塞非阻塞概念 同步和异步是针对应用程序和内核的交互而言的。 阻塞和非阻塞是针对于进程在访问数据的时候,根据IO操作的就绪状态来采取的不同方...

DemonsI
今天
0
0
org.apache.commons 常用工具类

一. org.apache.commons.io.IOUtils closeQuietly 关闭一个IO流、socket、或者selector且不抛出异常。通常放在finally块。 toString 转换IO流、 Uri、 byte[]为String。 copy IO流数据复制,...

sprouting
今天
0
0
linux使用Inotify监控目录或者文件状态变更

基本概念: Inotify 是一个 Linux特性,它监控文件系统操作,比如读取、写入和创建。Inotify 反应灵敏,用法非常简单,并且比 cron 任务的繁忙轮询高效得多。 需求: 1.有一个文件采集进程,...

mickelfeng
今天
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部