- 综合排序
- 最热优先
- 最新优先
- 来自专栏破晓之歌
前端页面可视化开发-livestyle,livereload,browser-sync
input内容页面修改，也会同步 3031端口为其页面控制站，同步选项主要针对交互 代理服务器的启动——针对动态网站（比如：php，java网站） 本地安装： 把browser-sync 安装到node依赖中 npm install browser-sync gulp --save-dev 写脚本： var gulp = require("gulp"); var livereload = require("gulp-livereload"); var browserSync = require("browser-sync"); gulp.task('watch',function ',function(){ browserSync.init({ server:{ baseDir:"./" } }) }) 命令行执行： gulp browser-sync start --server --files “**” gulp browser-sync 参考文档： 2.atom安装参考：https://www.jianshu.com/p
1.5K20发布于 2018-08-15 - 来自专栏HTML5学堂
前端工程化 | 定制专属提速“外挂”（上）
今天我们要在Gulp中使用的这款插件叫browser-sync。 browser-sync是一款浏览器同步测试工具，可以单独使用，也可以插入到Gulp、Grunt等工作流里使用，该篇文章主要介绍browser-sync在Gulp中的使用。 2.1 安装：browser-sync 命令行：$ cnpm install --save-dev browser-sync ? 2.2 在gulpfile.js中引入browser-sync插件 var browserSync = require('browser-sync').create(); var reload = browserSync.reload 2.6 查看browser-sync使用效果 Tips：gulp + 任务名称是用来执行gulp的任务。
1.3K50发布于 2018-03-13 - 来自专栏前端导学
为你的网站项目安装BrowserSync
进入你的网站项目目录 cd xxx $npm install browser-sync —save -d --save 把 browser-sync 添加到 package.json。 $ find node_modules 可以查看browser-sync包被安装的目录 运行git diff 可以看到package.json $git diff 运行 $npm ls 可以查看依赖树 检查 browser－sync 版本 $ . /node_modules/.bin/browser-sync —version 添加环境变量，回到项目目录 执行 $ export PATH=$PATH:. /node_modules/.bin 再 执行 $ browser-sync —version 看是否生效 使用 启动服务 $ browser-sync start --server --files=index.html
71530发布于 2019-05-26 - 来自专栏李维亮的博客
前端自动刷新工具
打开一个终端窗口，运行以下命令： npm install -g browser-sync 当然您也可以结合gulpjs或gruntjs构建工具来使用，在您需要构建的项目里运行下面的命令: npm install --save-dev browser-sync 3. 那么您只需要运行命令行工具，进入到该项目（目录）下，并运行相应的命令： 静态网站 // --files 路径是相对于运行该命令的项目（目录），以css为例： browser-sync start --server 例如我们再加入一个.html 文件 // --files 路径是相对于运行该命令的项目（目录） browser-sync start --server --files "css/*.css, *.html browser-sync start --server --files "**/*.css, **/*.html,**/*.js"
1.4K30发布于 2021-07-09 - 来自专栏地方网络工作室的专栏
打造前端MAC工作站（十）效率工具 Browsersync ，文件保存浏览器自动刷新
直接执行下面的命令即可 npm install -g browser-sync 前提是你已经安装了node.js了哦！ Browsersync 的使用 静态页面的使用 // 跳转到你的网页文件目录 cd ~/youSiteName // 执行下面的命令 browser-sync start --server --files 当然，你可能还要监控其他文件，比如html文件 browser-sync start --server --files "css/*.css, *.html" 就可以监控css目录下面的样式文件和根目录下面的 那就是用browser-sync做一个反向代理即可。 命令如下： browser-sync start --proxy "主机名" --files "css/*.css" 主机名就是你本地服务器中动态网页绑定的网址，比如www.cms.com。
1.5K100发布于 2018-01-08 - 来自专栏编程微刊
自动调试自动编译五分钟上手
--save-dev browser-sync 4.BrowserSync 将启动一个小型服务器，并提供一个URL来查看您的网站。 // --files 路径是相对于运行该命令的项目（目录） browser-sync start --server --files "css/*.css" 5.如果您需要监听多个类型的文件，您只需要用逗号隔开 例如我们再加入一个.html文件// --files 路径是相对于运行该命令的项目（目录） browser-sync start --server --files "css/*.css, *.html" browser-sync start --server --files "**/*.css, **/*.html" 7.如果您还没有使用gulp或grunt，那么可以通过以上方式创建Browsersync Image.png 3.安装 npm install browser-sync gulp --save-dev ? Image.png ?
75870发布于 2018-06-04 - 来自专栏coding个人笔记
本地调试 https
推荐一个 npm 包，browser-sync，除了这次想说的可以启动 https,这个包还可以实现热更新，对于一些老旧项目还是挺有用的。今天只介绍怎么启动 https。 npm install -g browser-sync //启动文件 browser-sync start --server --https --files "index.html" //代理其他server 成https browser-sync start --https --proxy "192.168.199.88:8080" 其实调试时候的证书，不用考虑安全、时效，这个包真的是很方便，可以节省很多时间
52250编辑于 2023-09-01 - 来自专栏游戏开发之旅
gulp的使用
方便前端进行即时开发的工具 自动化构建所需的插件 在项目路径下使用 npm init初始化之后，将下面需要安装的依赖复制到package.json文件中 "devDependencies": { "browser-sync 此时如果运行 gulp命令可能会报一些错误， 大概率是因为没有安装对应全局的插件，或者本地安装的插件和全局安装的版本号不一致 如果没有安装对应全局和本地的插件，则使用命令安装(以版本号2.24.4的browser-sync npm install browser-sync@2.24.4 --save-dev 如果安装了全局插件报错，可能因为本地和全局插件的版本号不一致，卸载重装插件试试 npm uninstall browser-sync gulp-concat'); var cache=require('gulp-cache'); var imagemin=require('gulp-imagemin'); var bs=require('browser-sync *",['images']); }); //初始化browser-sync的任务 gulp.task('bs',function(){ bs.init({ 'server': { 'baseDir
1.6K20发布于 2020-08-14 - 来自专栏centosDai
前端启动本地服务的四种方法，看完不会你锤我
1：打开终端窗口，运行以下命令： npm install -g browser-sync 2：安装完成之后，运行以下命令，查看版本，检查是否安装成功： browser-sync --version 运行结果如图 ： 3：打开终端窗口，进入需要访问的文件目录，运行命令： browser-sync start --serve 运行结果如图： 4：此时根据提示的地址就可以访问文件了。 6：如果你不想使用默认的端口号，就是想找茬，就使用命令： browser-sync init 运行如图： 根据提示运行命令： browser-sync start --config bs-config.js
6.3K20发布于 2021-09-30 - 来自专栏零域Blog
我的前端工作流
no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "browser-sync concat = require('gulp-concat') jshint = require('gulp-jshint') broeserSync = require('browser-sync minifyHTML = require('gulp-minify-html') autoprefixer = require('gulp-autoprefixer') gulp.task 'browser-sync /dist/') gulp.task 'build', ['styles', 'js', 'image', 'extend'] gulp.task 'default', ['browser-sync 用于开发环境实时更新页面，免去手动刷新的烦恼 rebuild当资源文件更新时让browser-sync重新加载变更 完成这些之后，可以使用gulp + 任务名称执行相应的任务 结束语 这是我的前端工作流
1.2K10编辑于 2022-03-22 - 来自专栏有趣的django
Django打造大型企业官网（二） 三、项目环境搭建
2.0.2 进front目录 npm init #初始化一个package.json配置文件文件 在package.json文件中添加要安装的包 "devDependencies": { "browser-sync specified\" && exit 1" }, "author": "zhang_derek", "license": "ISC", "devDependencies": { "browser-sync concat = require("gulp-concat"); var tinypng_nokey = require('gulp-tinypng-nokey'); var bs = require("browser-sync concat = require("gulp-concat"); var tinypng_nokey = require('gulp-tinypng-nokey'); var bs = require("browser-sync
1.5K30发布于 2019-06-14 - 来自专栏前端历劫之路
从开发一款基于Vue技术栈的全栈热重载生产环境脚手架，我学到了什么？
npm install -g browser-sync 也可以在本地项目下安装它。 npm install --save-dev browser-sync 如果你想更加深度地了解它，可以在浏览器上搜索以下网址： http://www.browsersync.cn/docs/ browser-sync require('browser-sync').create();这行代码的意思是创建browser-sync实例，并允许您创建多个服务器或代理。 gulp.task()代码段作用是创建任务。 这里，我们通过gulp-nodemon的start事件来触发browser-sync的启动。 这里需要注意的是，如果是修改了服务端的js文件，会先通过nodemon重启应用，这时浏览器不会刷新，要再保存一下修改的文件，browser-sync才会显示出修改后的效果。
1K20发布于 2021-12-01 - 来自专栏金朝麟的专栏
Express+Less+Gulp配置高效率开发环境
: "~4.13.1", "morgan": "~1.6.1", "serve-favicon": "~2.3.0" }, "devDependencies": { "browser-sync strict'; var gulp = require('gulp'); var minify = require('gulp-clean-css'); var browserSync = require('browser-sync ')) // .pipe(notify({ message: '图片处理完成' })); }); // 浏览器同步，用7000端口去代理Express的3008端口 gulp.task('browser-sync gulp.task('build',['clean','less','ejs','js','img'],function () { }); gulp.task('default',['browser-sync
2.4K00发布于 2017-02-08 - 来自专栏centosDai
前端启动本地服务的四种方法，看完不会你锤我
1：打开终端窗口，运行以下命令： npm install -g browser-sync 2：安装完成之后，运行以下命令，查看版本，检查是否安装成功： browser-sync --version 运行结果如图 ： 3：打开终端窗口，进入需要访问的文件目录，运行命令： browser-sync start --serve 运行结果如图： 4：此时根据提示的地址就可以访问文件了。 6：如果你不想使用默认的端口号，就是想找茬，就使用命令： browser-sync init 运行如图： 根据提示运行命令： browser-sync start --config bs-config.js
2K10编辑于 2021-11-30 - 来自专栏centosDai
前端启动本地服务的四种方法，看完不会你锤我
1：打开终端窗口，运行以下命令： npm install -g browser-sync 2：安装完成之后，运行以下命令，查看版本，检查是否安装成功： browser-sync --version 运行结果如图 ： 3：打开终端窗口，进入需要访问的文件目录，运行命令： browser-sync start --serve 运行结果如图： 4：此时根据提示的地址就可以访问文件了。 6：如果你不想使用默认的端口号，就是想找茬，就使用命令： browser-sync init 运行如图： 根据提示运行命令： browser-sync start --config bs-config.js
5.3K30发布于 2021-10-01 - 来自专栏浅枫沐雪
前端浏览器实时刷新工具
测试安装 npm install express -g # -g是全局安装的意思 npm安装浏览器实时刷新工具 npm install browser-sync -g ? 等待进度完成 切换到项目目录 # --file后面js/css/html文件的路劲 browser-sync start --server --files "index.html" # 即将弹出浏览器，
2.3K41发布于 2020-03-12 - 来自专栏有趣的django
Django打造大型企业官网（一） 一、nvm的安装二、gulp的安装和用法
9.更改文件自动刷新浏览器 安装插件 npm install browser-sync -–save-dev gulpfile.js var bs = require("browser-sync").create concat = require("gulp-concat"); var tinypng_nokey = require('gulp-tinypng-nokey') var bs = require("browser-sync
1.2K40发布于 2019-06-14 - 来自专栏TopFE
借助工具优化开发流程，提升开发体验
改造后，使用了browser-sync 这个库，记住socket支持多端热更新，并且也支持将当前目录或当前目录的特定文件 放到web server中 启动。 支持https访问。 启动命令 browser-sync start --server --files "*.html,*.css,*.js" --https 改造刷新后还需要选择串口 由于我的html demo需要与串口进行通信
23000编辑于 2024-05-25 - 来自专栏meishadevs的前端专栏
在手机上查看移动Web页
Node.js，因为下面的操作中有些步骤需要用到Node.js，Node.js的安装方法可以参考我前面写的博客使用NVM安装Node.js 第一步：全局安装Browsersync npm install -g browser-sync 第二步：进入移动端页面中的index.html所在的文件路径下 第三步：运行Browsersync browser-sync start --server 此时会自动使用默认的浏览器打开网页，并且在命令行窗口中会显示四个
2K20编辑于 2023-04-13 - 来自专栏静晴轩
Gulp探究折腾之路(I)
打开一个终端窗口，运行以下命令： npm install -g browser-sync 您告诉包管理器下载BrowserSync文件，并在全局下安装它们，您可以在所有项目(任何目录)中使用。 当然您也可以结合gulpjs或gruntjs构建工具来使用，在您需要构建的项目里运行下面的命令: npm install –save-dev browser-sync 启动 BrowserSync // –files 路径是相对于运行该命令的项目（目录） browser-sync start –server –files “css/*.css” 如果您需要监听多个类型的文件，您只需要用逗号隔开 browser-sync start --server --files "**/*.css, **/*.html" 注：在该文件下运行命令，默认需要启动网站文件：index.html。 browser-sync start --proxy "Browsersync.cn" "css/*.css" 参考博文：BrowserSync，迅捷从免F5开始。
2.3K80发布于 2018-03-27
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号