文档章节

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

阿振
 阿振
发布于 2016/06/25 00:52
字数 204
阅读 142
收藏 0
点赞 0
评论 1

在平时开发时,我用过很多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
毕竟,把人家惹哭了我还不知道该怎么去哄
gulp自动刷新浏览器

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

cobish ⋅ 2016/04/14 ⋅ 0

重构构建的平凡之路

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

腾讯云社区 ⋅ 2017/11/29 ⋅ 0

又一个选择 - Gulp.js

前言 还记得过年前的那篇介绍的文章,的强大,相信大家都见识了。年后打了两天的酱油,看了不少的插件和教程。发现了一个号称比要好的 - ,详细简介gulp.js。网上有很多比较和的文章。谈论到...

webchock ⋅ 2015/02/27 ⋅ 0

WEB前端 -“懒人”养成计划

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

力谱宿云 ⋅ 2016/07/14 ⋅ 5

重构构建的平凡之路

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

腾讯云社区 ⋅ 2017/11/29 ⋅ 0

关于gulp中自动添加版本号及Html文件应用路径替换的问题

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

阿振 ⋅ 2016/10/16 ⋅ 8

gulp配合browser-sync怎么实现在自己的域名下刷新同步?

var gulp = require('gulp'); var browserSync = require('browser-sync').create(); gulp.task('serve', function() { browserSync.init({ proxy: "http://v35new.faqrobot.org/" }); gulp.......

vcxiaohan ⋅ 2016/09/20 ⋅ 0

gulp项目实战

项目目录结构 image.png 项目功能有:压缩js,css,html,图片,监听和同步到浏览器 const gulp = require('gulp'); const pump = require('pump'); const sequence = require('run-sequence'); ......

bug_killer ⋅ 2017/12/23 ⋅ 0

使用gulp实现文件更改自动刷新

我相信肯定有很多前端开发者和我一样都厌倦了修改完代码再切换到浏览器刷新去看新的实现。今天我们就用一种最简单的文件监听模式和一个gulp插件(gulp-livereload)来实现这个功能。 首先安装...

Yard ⋅ 2016/10/27 ⋅ 0

学习CSS你必须踩得那些坑(二)

利用browser-sync实时刷新页面 为了省去每次修改代码后都要手动刷新页面,我习惯使用browser-sync监听文件,自动刷新浏览器 1. 安装Browsersync npm install -g browser-sync 2. 运行Browser...

博为峰教研组 ⋅ 2016/12/26 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Boost库编译应用

版本:Boost 1.66.0 Windows库编译 官网指南:直接执行bootstrap.bat处理文件即可,可以我却遇到一堆的问题。 环境:Windows 10 + Visual Studio 2017 Boost编译出来库命名 boost库生成文件命...

水海云 ⋅ 8分钟前 ⋅ 0

解决Eclipse发布到Tomcat丢失依赖jar包的问题

如果jar文件是以外部依赖的形式导入的。Eclipse将web项目发布到Tomcat时,是不会自动发布这些依赖的。 可以通过Eclipse在项目上右击 - Propertics - Deployment Assembly,添加“Java Build ...

ArlenXu ⋅ 8分钟前 ⋅ 0

iview tree组件层级过多时可左右滚动

使用vue+iview的tree组件,iview官网iview的tree树形控件 问题描述:tree层级过多时左右不可滚动 问题解决:修改overflow属性值 .el-tree-node>.el-tree-node_children { overflow: vi...

YXMBetter ⋅ 10分钟前 ⋅ 0

分布式锁

通过数据库实现 http://www.weizijun.cn/2016/03/17/%E8%81%8A%E4%B8%80%E8%81%8A%E5%88%86%E5%B8%83%E5%BC%8F%E9%94%81%E7%9A%84%E8%AE%BE%E8%AE%A1/ ZK实现:curator-recipes分布式锁的使用......

素雷 ⋅ 19分钟前 ⋅ 0

Sublime Text3 快捷键

选择类 Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本。 Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑。举个栗子:快速选中并更改所有相同的变量名...

AndyZhouX ⋅ 25分钟前 ⋅ 0

XamarinAndroid组件教程RecylerView自定义适配器动画

XamarinAndroid组件教程RecylerView自定义适配器动画 如果RecyclerViewAnimators.Adapters命名空间中没有所需要的适配器动画,开发者可以自定义动画。此时,需要让自定义的动画继承Animation...

大学霸 ⋅ 25分钟前 ⋅ 0

eureka 基础(二)

使用Eureka服务器进行身份验证 如果其中一个eureka.client.serviceUrl.defaultZone网址中包含一个凭据(如http://user:password@localhost:8761/eureka)),HTTP基本身份验证将自动添加到您...

明理萝 ⋅ 29分钟前 ⋅ 1

Kubernetes(五) - Service

Kubernetes解决的另外一个痛点就是服务发现,服务发现机制和容器开放访问都是通过Service来实现的,把Deployment和Service关联起来只需要Label标签相同就可以关联起来形成负载均衡,基于kuberne...

喵了_个咪 ⋅ 29分钟前 ⋅ 0

更新队友POM文件后报错

打开报错的地方的pom及其引用方法所在文件的pom,观察其版本号是否一致,不一致进行更改

森火 ⋅ 42分钟前 ⋅ 0

IDEA使用sonarLint

一、IDEA如何安装SonarLint插件 1.打开 Idea 2.点击【File】 3.点击【Settings】 4.点击【Plugins】 5.在搜索栏中输入“sonarlint”关键字 6.点击【Install】进行安装 7.重启Idea 二、IDEA如...

开源中国成都区源花 ⋅ 47分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部