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. Educational Codeforces Round 6 B

    B. Grandfather Dovlet’s calculator time limit per test 1 second memory limit per test 256 megabytes ...

  2. Http字段含义

    转载自:http://blog.csdn.net/sand_ant/article/details/10503579 一.request请求Header简介 Accept:--客户机支持的类型 Acc ...

  3. 动态规划小结 - 一维动态规划 - 时间复杂度 O(n)，题 [LeetCode] Jump Game，Decode Ways

    引言 一维动态规划根据转移方程,复杂度一般有两种情况. func(i) 只和 func(i-1)有关,时间复杂度是O(n),这种情况下空间复杂度往往可以优化为O(1) func(i) 和 func(1 ...

  4. [USACO06NOV] Roadblocks

    https://www.luogu.org/problem/show?pid=2865 题目描述 Bessie has moved to a small farm and sometimes enjo ...

  5. Python随机选择Maya场景元素

    之前在公司参与的一个与国外合作的项目中,有一景需要动态.随机地选取场景中的一些物体,同时显示指定材质,当时是用Houdini的节点+Hscript 解决的: 今天用简洁优雅的Python在Maya中写 ...

  6. bzoj 4773: 负环——倍增

    Description 在忘记考虑负环之后,黎瑟的算法又出错了.对于边带权的有向图 G = (V, E),请找出一个点数最小的环,使得 环上的边权和为负数.保证图中不包含重边和自环. Input 第1 ...

  7. 基本控件文档-UIButton属性---iOS-Apple苹果官方文档翻译

    本系列所有开发文档翻译链接地址:iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址 //转载请注明出处--本文永久链接:http://www.cnblogs.com/Ch ...

  8. python学习笔记（四）之分支和循环

    python中比较操作符有: > >= < <= == != 这些操作符返回True或False 1 >>> 1 < 3 2 True 3 >&g ...

  9. Windows Server 2008 R2英文版修改桌面主题(Win7主题)

    1:首先打开Server Manager(凡是不知道在那里开发均可像Win7一样在运行里面搜索) 2:然后在左边的树形菜单中选择:Feature 点击右边页面中的:Add Features 这时候会出 ...

  10. lnmp、lamp、lnmpa一键安装包（Updated: 2016-4-12）

    lnmp.lamp.lnmpa一键安装包(Updated: 2016-4-12)   文章目录 脚本特性 安装步骤 如何添加虚拟主机? 如何删除虚拟主机? 如何管理ftp账号? 数据备份 如何管理服务 ...