-
1. 安装 Node.js
BrowserSync是基于Node.js的, 是一个Node模块, 如果您想要快速使用它,也许您需要先安装一下Node.js
安装适用于Mac OS,Windows和Linux。 -
2. 安装 BrowserSync
您可以选择从Node.js的包管理(NPM)库中 安装BrowserSync。打开一个终端窗口,运行以下命令:
npm install -g browser-sync
您告诉包管理器下载BrowserSync文件,并在全局下安装它们,您可以在所有项目(任何目录)中使用。
当然您也可以结合
gulpjs
或gruntjs
构建工具来使用,在您需要构建的项目里运行下面的命令:npm install --save-dev browser-sync
-
3. 启动 BrowserSync
一个基本用途是,如果您只希望在对某个
css
文件进行修改后会同步到浏览器里。那么您只需要运行命令行工具,进入到该项目(目录)下,并运行相应的命令:静态网站
如果您想要监听
.css
文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器,并提供一个URL来查看您的网站。// --files 路径是相对于运行该命令的项目(目录) browser-sync start --server --files "css/*.css"
如果您需要监听多个类型的文件,您只需要用逗号隔开。例如我们再加入一个
.html
文件// --files 路径是相对于运行该命令的项目(目录) browser-sync start --server --files "css/*.css, *.html" // 如果你的文件层级比较深,您可以考虑使用 **(表示任意目录)匹配,任意目录下任意.css 或 .html文件。 browser-sync start --server --files "**/*.css, **/*.html"
我们做了一个静态例子的示范,您可以下载示例包,文件您可以解压任何盘符的任何目录下,不能是中文路径。打开您的命令行工具,进入到BrowsersyncExample目录下,运行以下其中一条命令。Browsersync将创建一个本地服务器并自动打开你的浏览器后访问http://localhost:3000地址,这一切都会在命令行工具里显示。你也可以查看Browsersync静态示例视频
// 监听css文件 browser-sync start --server --files "css/*.css" // 监听css和html文件 browser-sync start --server --files "css/*.css, *.html"
动态网站
如果您已经有其他本地服务器环境PHP或类似的,您需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站。
// 主机名可以是ip或域名 browser-sync start --proxy "主机名" "css/*.css"
在本地创建了一个PHP服务器环境,并通过绑定Browsersync.cn来访问本地服务器,使用以下命令方式,Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn,并监听其css目录下的所有css文件。
browser-sync start --proxy "Browsersync.cn" "css/*.css"
一点建议
我们建议您结合gulp或grunt来使用,我们这里有详细说明Gulp文档、Grunt文档。如果您还没有使用gulp或grunt,那么可以通过以上方式创建Browsersync
- 浏览: 353149 次
- 性别:
- 来自: 深圳
最新评论
-
sunbin:
不好意思,这个用于个人记录。http://sunbin.ite ...
Spring boot+Spring Security 4配置整合实例 -
v韧竹v:
大神,你这个有demo源码吗?我安装您这边操作的,好像有问题, ...
Spring boot+Spring Security 4配置整合实例 -
sunbin:
西蜀石兰 写道关键的是controller建立了一个中转吧,这 ...
Spring Boot 添加JSP支持【转】 -
czwanglei:
这篇文章写的真不错。。
Spring Boot 添加JSP支持【转】 -
西蜀石兰:
关键的是controller建立了一个中转吧,这样所有的jsp ...
Spring Boot 添加JSP支持【转】
相关推荐
总结,`Gulp_Express_Browsersync`是一个高效的前端开发环境,它结合了Gulp的自动化、Express的服务器功能和Browsersync的实时刷新,极大地提高了开发效率,使得前端开发者能更加专注于代码质量,而不是繁琐的构建和...
Node.js可能被用来搭建本地开发服务器,提供静态文件服务;Gulp则可能用于自动化构建过程,如编译Less或Sass,转换ES6代码,合并和压缩JavaScript及CSS文件,甚至处理图片优化等;而Browsersync则集成在开发环境中,...
在 Gulp 中,通常使用 `gulp-uglify` 插件来完成这个任务,这有助于提高网页加载速度和节省用户流量。 ### 使用 gulp-kitchen 在 `gulp-kitchen-master` 压缩包中,包含了配置好的 Gulp 工作流,用于实现上述功能。...
发电机-SF 这个发电机支架具有一个功能齐全的前端grunt / gulp工具的symfony应用程序。 只需搭建您的应用程序,即可开始使用。...具有livereload的BrowserSync开发/产品服务器 选择适合您需求的构建工具 选择
在本地搭建Web服务器,如WAMP或使用Node.js的BrowserSync,或者通过HBuilder等集成开发环境内置的模拟器进行测试。在本地搭建服务器时,确保手机与电脑在同一Wi-Fi环境下。 最后,使用HBuilder这样的工具,可以方便...
alp-dev则是针对alp服务器进行定制化开发的辅助工具,旨在进一步增强其功能,简化开发环境的搭建和管理。 二、webpack配置详解 webpack是前端模块打包工具,能够将各种资源(如JavaScript、CSS、图片等)转换并打包...
在【环境安装】阶段,开发者需要准备相应的软件工具,如Node.js、npm、Bower、BrowserSync、Gulp等。安装时应注意避免中文路径,并通过配置package.json文件来管理依赖。这些工具可以帮助开发者自动化构建流程,例如...
10. 开发工具:源码可能包含了一个构建系统,如Gulp或Webpack,用于自动化任务如代码编译、压缩、合并和版本控制,以及开发环境如BrowserSync,便于实时预览和调试。 综上所述,这个"167_HTML手机电脑网站"源码包是...
在当今的Web开发领域,快速搭建高效、美观的静态站点成为了一项重要任务。static-starter项目就是为此目的而生的一个工具,它结合了Jekyll、Gulp、Sass、Bower和BrowserSync等技术,为Zurb基金会的基础项目提供了一...
本地 BrowserSync 服务器 HTML、CSS、JS 和 JSON 缩小 HTML, CSS, JS, JSON & Color linting JS 样式验证 SASS 样式格式 内联 JSON 数据对象 图像优化 使用 AWS S3 进行资产托管 使用 AWS CloudFront 进行内容交付 ...
本文主要讲述如何搭建基于ES6和热加载的前端简单开发环境,该环境适合demo类小项目,不需要依赖browsersync等多余的东西。本文将详细介绍搭建该开发环境所需的各种配置和依赖项。 一、目录结构 首先,让我们来看...
CSS 自动前缀带有 BrowserSync 的内置预览服务器自动编译手写笔自动编译 CoffeeScript 使用 Jade 的模板图像优化自动连接与安装的依赖项有关此生成器可为您做什么的更多信息,请查看我们的package.json使用的。...
带有 BrowserSync 的内置预览服务器 预编译的JSX文件中./compiled夹使其easiear使用这些服务器端。 依赖管理器 - Browserify 任务位于 gulp 目录中,每个文件有 1-2 个任务,而不是一个大文件。 包括 ##CSS ##JS ...
CSS自动前缀带有BrowserSync的内置预览服务器使用Sass编译自动整理脚本使用源映射将已编译CSS映射到源样式表图像优化自动连接安装的依赖项有关此生成器可以为您做什么的更多信息,请查看我们package.json使用的。...
带有BrowserSync的内置预览服务器 图像优化 安装的连线依存关系 如果不需要它们,则可以退出使用凉亭,子画面生成和图像优化。 雪碧表 为了生成精灵,您需要在app/images/sprites/上为每个精灵类别创建一个目录。 它...
使用启用CSS自动前缀带有BrowserSync的内置预览服务器用自动编译Sass 自动整理脚本使用源映射将已编译CSS映射到源样式表很棒的图像优化有关此生成器可以为您做什么的更多信息,请查看我们package.json使用的。...
带有BrowserSync的内置预览服务器(新) CSS自动前缀(新) 自动编译Sass(通过libsass) (新) 自动整理脚本 很棒的图像优化(通过OptiPNG,pngquant,jpegtran和gifsicle) 自动与安装接线依赖项(当gulp ...
Yeoman是Web开发中的一个自动化工具,旨在帮助开发者快速搭建应用的基础结构。Bootstrap是流行的前端开发框架,用于快速构建响应式和移动优先的网站。Gulp则是一个自动化任务运行器,能够自动化构建过程,提高开发...
带有BrowserSync的内置预览服务器 自定义将资产发布到远程(前端到后端)项目 支持ZIP / FTP / PWA 轻松定义和扩展自己的任务 结构体 :rocket: 我们建议使用搭建前端Web应用程序。 project ├── .tmp // ...
使用编写ECMA Script 6代码使用错误处理CSS自动前缀预提交钩子可验证您的代码带有BrowserSync的内置预览服务器用自动编译Sass 自动缩小您的脚本自动生成角度模板通过自动连接依赖项很棒的图像优化使用Karma和...