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. 监听scrollview

    http://blog.csdn.net/u012527802/article/details/47320009

  2. Machine Learning CodeForces - 940F (带修改的莫队)

    You come home and fell some unpleasant smell. Where is it coming from? You are given an array a. You ...

  3. 如何更有效使用 Rational AppScan 扫描大型网站，第 1 部分: 工作原理及技术分析

    Rational AppScan 工作原理 Rational AppScan(简称 AppScan)其实是一个产品家族,包括众多的应用安全扫描产品,从开发阶段的源代码扫描的 AppScan sourc ...

  4. PHP调试的时候出现了警告:

    It is not safe to rely on the system解决方法,其实就是时区设置不正确造成的,本文提供了3种方法来解决这个问题. 实际上,从PHP 5.1.0开始当对使用date() ...

  5. POJ 3255 Roadblocks （次短路模板）

    Roadblocks http://poj.org/problem?id=3255 Time Limit: 2000MS   Memory Limit: 65536K       Descriptio ...

  6. 2015/9/1 Python基础(6)：列表

    列表和字符串类型很相似,是同样的序列式数据类型.但是字符串只能由字符组成,列表可以保留任意数目的Python对象的灵活的容器.Python的列表比C的数组要灵活,数组里面只能是一种类型,列表可以有多种 ...

  7. MSSQL Get Last Monday and Last Sunday

    获取上周的周一和周日 代码: --start of last week , ) --end of last week , )

  8. jQuery简单日历插件版

    先来看demo:http://codepen.io/jonechen/pen/xOgZMz 插件代码: ; (function($) { var Calendar = function(ele, op ...

  9. 【BZOJ1598】牛跑步 [A*搜索]

    牛跑步 Time Limit: 10 Sec  Memory Limit: 162 MB[Submit][Status][Discuss] Description BESSIE准备用从牛棚跑到池塘的方 ...

  10. 【51NOD-0】1081 子段求和

    [算法]树状数组(区间和) [题解]记得开long long #include<cstdio> #include<cstring> #include<algorithm& ...