1.在站点路径里打开cmd控制台。

输入：cnpm install gulp-connect --save-dev

2.编辑gulpfile.js

3.控制台执行gulp任务

输入gulp serve

4.查看浏览器该任务有没有生效

因为我们使用这个插件创建了一个服务器，它的端口默认是8080，所以打开文件时，需要在地址栏输入 localhost:8080/

此时，你看到的就是其目录下默认的index.html

这时候你在编辑器编辑该页面，当ctrl+s后，浏览器就应该同步了。

后面还有有其他插件的笔记。记得回来啊~

gulp-connect插件浏览器实时同步刷新的更多相关文章

  1. 通过Gulp使用Browsersync实现浏览器实时响应文件更改

    Gulp是什么鬼 Browsersync又是什么鬼 如何安装使用Browsersync 安装 使用 效果图 参考 Gulp是什么鬼 Gulp是一种基于node.js的构建工具,有关构建工具的概念请移步 ...

  2. gulp之压缩css，less转css，浏览器实时刷新【原创】

    gulp入门 gulp浏览器实时同步 首先要下载对应的插件包: gulp-less包:cnpm install gulp-less --save-dev gulp-connect包:cnpm inst ...

  3. 使用Gulp里面的浏览器同步插件browser-sync的注意事项

    使用Gulp里面的浏览器同步插件browser-sync的注意事项 第一步:打开你的开发者工具, 编写前端代码!图如下! 第二步:打开你当前工作目录的命令行窗口 第三步:输入浏览器同步执行的代码! b ...

  4. 精通gulp常用插件

    本文主要展示的是gulp常用插件的使用方法和用途,通过对插件的熟练运用达到精通gulp.不定期更新.可以到github上面下载DEMO. github地址:lin-xin/gulp-plugins 匹 ...

  5. 使用gulp和bable实现实时编译ES6代码

    这篇文章最初发表在我自己折腾的博客站点上:使用gulp和bable实现实时编译ES6代码,该博客用了一位前辈开源的源码,基于thinkjs和vuejs开发,欢迎大家来逛逛. 问题描述> 项目开发 ...

  6. gulp常用插件之browser-sync使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 browser-sync这是一个可以在多端(pc.移动.平板)实时监测文件修改,自动刷新浏览器的工具.其实这并不是转给gulp使用的,在其它构建工 ...

  7. webpack-dev-server 搭建本地服务以及浏览器实时刷新

    一.概述开发项目中为了保证上线,开发项目是都需要使用localhost进行开发,以前的做法就是本地搭建Apache或者Tomcat服务器.有的前端开发人员 对服务器的搭建和配置并不熟悉,这个时候需要后 ...

  8. gulp 常用插件汇总

    2017-07-26更新:图片压缩插件使用gulp-smushit,gulp-smushit压缩率比较大,gulp-imagemin 图片压缩插件压缩率不明显. 见下图压缩率: 1.gulp安装 参照 ...

  9. gulp常用插件之gulp-babel使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-babel这是Babel的Gulp插件. 此自述文件适用于gulp-babel v8 + Babel v7检查7.x分支以了解使用Bab ...

随机推荐

  1. Network LCA修改点权

    Problem Description The ALPC company is now working on his own network system, which is connecting a ...

  2. Mybatis批量更新详解

    转:http://www.cnblogs.com/winkey4986/p/3915151.html Mybatis批量更新 批量操作就不进行赘述了.减少服务器与数据库之间的交互.网上有很多关于批量插 ...

  3. thrift源码阅读笔记

    http://note.youdao.com/noteshare?id=3f3cf77bf70656ac626f7bf2099063c7

  4. Leetcode 234. 回文链表(进阶)

    1.题目描述 请判断一个链表是否为回文链表. 示例 1: 输入: 1->2 输出: false 示例 2: 输入: 1->2->2->1 输出: true 进阶: 你能否用 O ...

  5. java 面向对象编程（OOP）

    java是一个支持并发.基于类和面向对象的计算机编程语言.下面列出了面向对象软件开发的优点: 代码开发模块化,更易维护和修改: 代码复用: 增加代码的可靠性和灵活性: 增加代码的可理解性. 封装 封装 ...

  6. 使用kubeadm安装Kubernetes 1.12

    使用kubeadm安装Kubernetes 1.12 https://blog.frognew.com/2018/10/kubeadm-install-kubernetes-1.12.html 测试环 ...

  7. eclipse常见问题解决方案

    1.maven项目,启动报错ClassNotFoundException,原因是tomcat下\WEB-INF\classes目录中,java文件没有编译成class文件.解决方法: 在\WEB-IN ...

  8. CSS3知识之阴影box-shadow

    一.定义和用法 box-shadow 属性向框添加一个或多个阴影. box-shadow: h-shadow v-shadow blur spread color inset; h-shadow   ...

  9. 组合数学--约瑟夫环问题 Josephus

    约瑟夫斯问题(有时也称为约瑟夫斯置换),是一个出现在计算机科学和数学中的问题.在计算机编程的算法中,类似问题又称为约瑟夫环. 有n个囚犯站成一个圆圈,准备处决.首先从一个人开始,越过k-2个人(因为第 ...

  10. Scala环境安装设置

    Scala语言可以安装在任何类UNIX或Windows系统.要安装Scala,必须先安装Java1.5或更高版本安装在计算机上. Windows上安装Scala: 步骤(1):JAVA设置: 首先,必 ...