BrowserSync真是前端必备神器,浏览器同步工具.简单来说就是当你保存文件的同时浏览器自动刷新网页,省去了手动的环节,大大的节省了开发时间,这个工具是基于nodejs的,可以通过npm安装,不在啰嗦 安装Node后,通过npm安装BrowserSync: npm install -g browser-sync 然后,就可以开始使用了.打开控制台进入项目所在的目录,然后输入像这样的命令: browser-sync start --server --files "css/*.css"…

browser-sync启动命令 Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面. 官网文档:http://www.browsersync.cn/ 1. 安装 Node.js BrowserSync是基于Node.js的, 是一个Node模块, 如果您想要快速使用它,也许您需要先安装一下Node.js. 官网下载:http://nodejs.cn/download/ 2. 安装 BrowserSync npm instal…

安装gulp (前提是已经安装了node) 全局安装: npm install -g gulp 本项目安装: npm install gulp --save-dev 安装browser-sync 全局安装: npm install -g browser-sync 本项目安装: npm install browser-sync --save-dev 编写代码 在项目根目录下创建文件gulpfile.js 在gulpfile.js中写入如下代码 const gulp=require("gulp&qu…

以前的调试方式 修改完项目文件(html.js.css等)后保存,在浏览器刷新页面查看修改后的效果 本地开启一个 tomcat 服务,修改文件后保存刷新页面,移动端或其他 pc 则需要输入 ip + 文件路径进行调试 传统调试页面的缺点是每次修改完代码,需要在相关设备上 F5 刷新下页面才能看到刷新后的效果,多个页面窗口的话还需要切换页面刷新查看效果,基于此,网页真机调试利器-Browsersync 呼之欲出. 什么是 Browsersync? 能够使浏览器快速.实时响应文件的修改 可以同时在…

本篇主要是以 http://www.imooc.com/article/14759 为参考来写的: 已经整理到github上:https://github.com/Macaulish/gulp-BrowserSync-nodemon 1,使用 Browsersync 来进行浏览器同步测试 参考: http://www.browsersync.cn/#install1)安装NodeJs,2)安装BrowserSync (npm install -g browser-sync)3)安装好之后,在控制…

问题 为了方便实时预览前端开发过程中修改源码后的页面,我在全球最大的同性交友网Github中找到了一个非常实用的工具,browser-sync. 安装使用方式请自行到官网https://browsersync.io/参考文档,仓库地址在这里https://github.com/BrowserSync/browser-sync GetStart中官网给出的CLI示例命令为: browser-sync start --server --files "css/*.css" 我将其写到到npm…

BrowserSync虽然这个技术不算新,但是依然有用.略微介绍下 没有安装node,先安装node,这里不再做介绍 安装 npm install -g browser-sync  全局安装,方便在任意目录下启动 所在项目中启动 browser-sync start --server --files "**"  所有文件都检测改变刷新,并自动打开浏览器 http://localhost:3000/ 相当于你的index.html文件,如果你的html文件夹下有个db.html,那么地址…

(2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2016年7月11日) 今天晚上,前端组的小伙伴问我说能不能帮忙看看他的电脑为什么在安装了browser-sync插件以后,正常启动服务以后却无法通过手机访问,经过简单的排查,发现竟然是由VMnet虚拟网卡引起的网络故障,遂记录下来.也正好把整个browser-sync插件的安装过程说一下. 1.部署好git环境以及Node.js的安装,这个非常简单,在此就不多做解释了. 2. 登录 http://www.browser…

Browsersync 是一个很好用的工具,它可以实时监测文件的变动然后自动刷新浏览器,不用每次去点刷新或F5,特别在调试样式时非常有用. browsersync中文网  http://www.browsersync.cn/ 安装 首先安装node.js(直接下载后安装就行,http://nodejs.cn/download/) > 打开命令行(win+r 然后输入cmd打开命令行)> npm install -g browser-sync (通过npm安装browsersync,如果下载慢的…

更多gulp常用插件使用请访问:gulp常用插件汇总 browser-sync这是一个可以在多端(pc.移动.平板)实时监测文件修改,自动刷新浏览器的工具.其实这并不是转给gulp使用的,在其它构建工具也可以用. 更多使用文档请点击访问browser-sync工具官网. 安装 首先这个工具是基于node环境的,可以通过npm安装. 在命令行窗口输入npm install -g browser-sync 全局安装BrowserSync: 安装完成后,可以通过browser-sync --versi…

六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.exports = { // 配置入口 entry: { }, // 编译后的文件路径 output: { path: '', // 文件路径 filename: '' // 文件名称 }, module: { // 编译规则 loaders: [] }, // 辅助的插件 plugins:[] }…

gulp自动刷新的插件很多,但是感觉最好用的还是 browser-sync 插件.如果不想用命令行,也可以使用 browser-sync界面工具 先安装 browser-sync 插件: npm install browser-sync --save-dev 安装 browser-sync 插件可能遇到的问题 http://www.cnblogs.com/ayseeing/p/4201202.html browser-sync API gulpfile.js文件代码如下: // 先引入依赖模块…

好久都没有发表过日志了,反正近期项目也已经接近尾声了,那么是时候该总结一下在项目中用到的技术了,请看:这里先废话几句,我们现在的开发模式是这样子的:先把本地的网页上传到远程服务器(因为好多设备都要去访问一个固定的地址),然后将网址输入到各个测试机的测试浏览器里面手动打开(或者使用浏览器插件等,生成二维码扫一下).然后手机开始下载页面,需要等待下载.观看效果进行测试,每个测试机都要操作一遍.测试其他网页的时候,每个测试机重新输入网址.刷新.如果代码有修改,需要重新上传服务器进行刷新.但是我希望是这…

六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.exports = { // 配置入口 entry: { }, // 编译后的文件路径 output: { path: '', // 文件路径 filename: '' // 文件名称 }, module: { // 编译规则 loaders: [] }, // 辅助的插件 plugins:[] }…

Node环境 通过 node.js 网站下载了安装包进行安装 node.js, npm也会一起安装 node --version # 查看node.js版本 npm --version #查看npm版本 npx --version 通过命令配置 npm 淘宝镜像 npm config set registry https://registry.npm.taobao.org npm config get registry #验证命令 npm config list #列出当前npm的配置列表 定位…

首先我用的是mac电脑在我执行安装browser-sync时遇到如下问题: 因为不被允许所以我只能不安装全局了: 但是又出现了如下的新问题 纠结了半个小时,终于知道为什么会出现这个问题了, node只有--global or -g才是全局安装的包,一般才会出现在PATH里,才可以直接运行命令,否则就在./node_modules/.bin/, 需要加上路径才可以运行,也可以在package.json里添加入口,这个入口的环境变量默认包含node_modules/.bin, 可以直接 "scrip…

有一些自带命令的辅助开发.测试类的工具,官方都推荐全局安装,如果不想全局安装只想在某个项目下用该怎么办呢? 如http-server.browser-sync.webpack这种自带CLI的工具 使用命令运行会报错,如下, $ http-server bash: http-server: command not found $ browser-sync bash: browser-sync: command not found $ webpack bash: webpack: command n…

最近公司赶一个项目,是mobile端,之前没怎么做过移动端的开发,这个项目算是个小尝试. 在做项目的过程中,用到了一个神器--browser-sync,在这里分享给大家. 1.静态页面调试 作为前端,肯定是要保证页面的兼容性的. 通常的测试场景是,前端人员人手N部测试机,改下页面,依次手动刷新各个手机,真的非常蛋疼,这些重复性的工作,不应该由人来完成,而应该由机器来自动完成,这时,browser-sync就体现出了它的巨大价值. 有了它,前端人员就能从繁琐的重复性工作中解脱出来,更专注的解决技术…

web自动化工具-Browsersync browser-sync才是神器中的神器,和livereload一样支持监听所有文件.可是和livereload简单粗暴的F5刷新相比,browsersync的局部刷新造成了本质的区别,推荐使用browsersync.browser-sync更是可以做到多页面终端同步,文件同步,交互同步,神器也.browser-sync官方文档 安装 全局安装即可: 1 sudo npm install -g browser-sync 使用 静态站,直接到项目目录启动即…

引入 大家写网页的时候,肯定都遇到这种情况,每次用sublime写完都要返回浏览器,刷新页面,而这个工具正好解决了这个问题,提高前端开发效率,这是一个npm的包 browser-sync browser-sync的基本使用 作用:文件保存一下,就会自动监视文件变化,自动刷新浏览器 打开cmd,输入以下命令 全局安装:npm install -g browser-sync //-g是全局安装 注意:安装完之后,一定要切换到你要监视的项目下执行下面的代码 browser-sync start --s…

前段时间使用了gulp+browser-sync才发现这个东西真的很好用. 准备工作:(1).安装nodejs.gulp是基于nodejs使用的,所以先安装nodejs,https://nodejs.org/en/download/在这里直接下载安装就好. (2).新建一个项目目录,比如我在E盘中新建一个文件夹:gulpbrowsersync  .在其中新建一些文件夹或者文件比如style文件夹.js文件夹.images文件夹以及index.html, 开始工作: 1.进入项目目录E:\gulp…

1.安装 Browsersync 和 依赖包 Gulp npm install browser-sync gulp --save-dev 2.gulpfile.js var gulp = require('gulp'), //本地安装gulp所用到的地方 browserSync = require('browser-sync'), //引入模块 //静态服务器 gulp.task('browser-sync', function() {//注册任务 browserSync.init({//调用A…

Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试. 原理 当网页已连接到BrowserSync的时候,我们可以查看一下源码,会发现它们都被添加了与BrowserSync有关的一段<script>代码,就像liveReload浏览器插件做的那样.这些代码会在浏览器和BrowserSync的服务器之间建立web socket连接,一旦有监听的文件发生…

Gulp是什么鬼 Browsersync又是什么鬼 如何安装使用Browsersync 安装 使用 效果图 参考 Gulp是什么鬼 Gulp是一种基于node.js的构建工具,有关构建工具的概念请移步什么是构建工具 Gulp的安装及基本使用,可参考一点| gulp详细入门教程,写得十分6,通俗易懂 Browsersync又是什么鬼 Browsersync可以让浏览器实时响应所做的文件更改,包括html, js, css, less, sass等,并自动刷新页面 而且可以在多个浏览器.多个设备(P…

1.全局安装cnpm(淘宝的npm国内镜像),gulp,rimraf(卸载用插件)npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install -g rimraf gulp 项目下新建package.json和gulpfile.js. 打开package.json添加 {}  花括号,保存. 2.gulp插件(每个项目都要安装一次)cnpm install --save-dev gulp gulp-repla…

上次介绍了一款DebugGap移动端调试工具DebugGap推荐.但是这几天使用了之后感觉还是有些不足,尤其是里面的调试工具虽然和Chrome里面的调试长的很像,但是多少有些不同,使用起来还是不太方便的,看到一位仁兄介绍的BrowserSync,于是看看了,感觉还行吧.它主要是用来同步更新的,比如文件修改了,浏览器会自动刷新,以及还有一点好处就是,PC,移动端都是同步的,可惜的是没有调试工具,在Chrome调试工具里面调试的不会同步更新到手机端,要是这个可以就好了. 虽然没个调试工具,但我们可以…

背景: 之前在学gulp的时候,使用gulp-livereload来实时自动刷新页面省时开发,但一直比较难用,现在找到新的替代神器. 安装:   // 使用淘宝镜像会快些 npm install -g browser-sync --registry=https://registry.npm.taobao.org 启动:   (1)静态网页(服务器模式)          先进入项目目录,然后: // --files 路径是相对于运行该命令的项目(目录) browser-sync start --…

Browsersync 能让浏览器实时.快速响应文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试,当使用browsersync后,任何一次代码保存,以上的设备都会同时响应文件的改动.效果如下: (图片来自:http://www.browsersync.cn/ ) 如何使用? 1.安装Node.js BrowserSync是基于Node.js的, 是一个Node模块,Node.js可以从官网下载,当…

在移动端网页开发中,总是因为不方便调试,导致各种问题不容易被发现.但是现在有了Browsersync,一切都解决了. 不熟悉的同学可以看看Browsersync的官方网站Browsersync中文网. 五分钟快速入门 1.使用Browsersync前需要安装node.js.详细的安装过程可参见windows 下安装nodejs 2.安装Browsersync.打开一个终端窗口,运行以下命令:npm install -g browser-sync 3.启动 BrowserSync. 如果您想要监听…

Vagrant is a tool that manages oracle virtual boxes 1.本地下载https://atlas.hashicorp.com/laravel/boxes/homestead/versions/0.2.6/providers/virtualbox.box下载该box作为base, (https://atlas.hashicorp.com/boxes/search?utf8=%E2%9C%93&sort=&provider=&q=homes…