Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >为你的网站项目安装BrowserSync

为你的网站项目安装BrowserSync

作者头像
lilugirl
发布于 2019-05-26 03:29:59
发布于 2019-05-26 03:29:59
5890
举报
文章被收录于专栏:前端导学前端导学

为什么80%的码农都做不了架构师?>>>

进入你的网站项目目录 cd xxx

$npm install browser-sync —save -d

  • --save 把 browser-sync 添加到 package.json。
  • -d 使 npm 输出更多的日志信息。

$ 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

你对index.html的修改可以实时提现在浏览器http://localhost:port 上

方法二

安装 BrowserSync (依赖 NodeJS):

npm install browser-sync@2.7.1 然后在项目目录运行这个命令:

browser-sync start --server --port 4000 --files index.html --files css/main.css 这样页面就会自动刷新了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
rollup打包入门到实践
rollup在业务中基本很少会有接触到,通常在我们的业务中大部分接触的脚手架,或者自己搭建项目中,我们都是用webpack,无论是vue-cli,还是react-create-app他们都是基于webpack二次封装的脚手架,所以我们对rollup更陌生一点,本文是一篇关于rollup的学习笔记,希望看完在项目中有所思考和帮助。
Maic
2022/12/21
1.4K0
rollup打包入门到实践
前端页面可视化开发-livestyle,livereload,browser-sync
本质是监控文件修改,实时刷新浏览器,需要安装livereload插件和node.js插件,全局刷新
晓歌
2018/08/15
1.1K0
前端页面可视化开发-livestyle,livereload,browser-sync
在Spectrum测试链用Truffle启动第一个宠物商店Dapp
在光谱链上实现一个Dapp,就是合约部署完之后(有一个我们可以直接与他交互的后端),然后做这个应用层的代码和后端的交互,给DApp加上前端数据交互、读取的界面。
rectinajh
2018/10/25
1.3K3
Gulp探究折腾之路(I)
前言: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。相比于grunt的频繁 IO 操作,gulp的流操作,能更快地更便捷地完成构建工作。此处仅记录初步折腾中所遇点滴以及待解决的点。 Gulp折腾之初探 折腾之战略上的藐视 回过头看Gulp的折腾历程,使用还是非常简易的。初步入门资料可参考这里。所以战略上一定要藐视”她”;当然战术上要
晚晴幽草轩轩主
2018/03/27
2K0
给初学者的Gulp教程(译)
Gulp是一个在你开发web时,帮助你完成几个任务的工具。它经常用来进行一些前端任务,比如:
治电小白菜
2020/08/25
4.6K0
给初学者的Gulp教程(译)
放弃webpack,拥抱gulp
别被标题吓到,哈哈,即使现在vite横空出世,社区光芒四射,两个字很快,但是webpack依旧宝刀未老,依然扛起前端工程化的大梁,但是今天我为啥说要拥抱gulp,因为我们常常吃一道菜,所以要换个口味,这样才营养均衡🤣。 gulp定义是:用自动化构建工具增强你的工作流程,是一种基于任务文件流方式,你可以在前端写一些自动化脚本,或者升级历史传统项目,解放你重复打包,压缩,解压之类的操作。 个人理解gulp是一种命令式编程的体验,更注重构建过程,所有的任务需要你自己手动创建,你会对构建流程会非常清楚,这点不像
Maic
2022/07/28
9850
放弃webpack,拥抱gulp
使用Webpack快速配置编写HTML基础环境
前言 由于项目需要构建个webpack打包坏境: 目前用到技术栈:Pug + SASS + Webpack + browser JavaScript使用ES6编写编译ES5即可。 package.json直接写入: { "name": "My_Project", "version": "0.0.1", "scripts": { "serve": "webpack-dev-server", "build": "webpack --config webpack.config.prod
用户1203875
2018/06/19
9100
前端工程化 | 定制专属提速“外挂”(上)
友情提示:推荐阅读时间15分钟 + 练习时间15分钟 HTML5学堂:上一期给大家分享了Gulp的安装与使用,让大家对Gulp有着初步的认识。咱们学习使用Gulp的目的是提升开发效率,把开发过程中重复性的工作交给Gulp,让Gulp按照你的配置去完成操作。 Gulp本身给开发者提供了5个API接口,可以根据这些接口来开发Gulp插件。但是,Gulp目前拥有丰富的插件资源,开发人员可以根据项目的需求和个人偏好来配置使用这些插件,比如可以配置当修改了HTML文件浏览器自动刷新,也可以配置修改了CSS文件浏览器自
HTML5学堂
2018/03/13
1.1K0
前端工程化 | 定制专属提速“外挂”(上)
打造前端MAC工作站(十)效率工具 Browsersync ,文件保存浏览器自动刷新
本文介绍了如何利用Browsersync这个工具提高前端开发效率,通过具体的使用场景和命令行参数进行了详细说明。
FungLeo
2018/01/08
1.3K0
打造前端MAC工作站(十)效率工具 Browsersync ,文件保存浏览器自动刷新
自动调试自动编译五分钟上手
Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。 无论您是前端还是后端工程师,使用它将提高您30%的工作效率。 MD5加密: import crypto from "crypto"; function md5(data) { let Buffer = require("buffer").Buffer; let buf = new Buff
王小婷
2018/06/04
6130
从开发一款基于Vue技术栈的全栈热重载生产环境脚手架,我学到了什么?
今天,我们来搞一个新东西,名字叫基于Vue技术栈的全栈热重载生产环境脚手架。实话说,这个名字我想了很久。最终,还是以这个名字作为文章标题。我先拆分解释下:全栈的意思是支持前后端;热重载这个名词相信大家很熟悉,就是页面每次改动,不需要手动去刷新,可自动刷新;生产环境这里你可以理解成线上环境,用户使用的环境。
Vam的金豆之路
2021/12/01
7190
从开发一款基于Vue技术栈的全栈热重载生产环境脚手架,我学到了什么?
Express+Less+Gulp配置高效率开发环境
金朝麟
2017/02/08
2.2K0
Express+Less+Gulp配置高效率开发环境
gulp 实现纯html、css、bootstrap 的打包
在开发 web 项目时,我们通常需要将 HTML、CSS、JavaScript 等文件打包成静态文件,以便于部署和运行。gulp 是一个流行的 JavaScript 流的构建工具,可以帮助我们自动化这个过程, 相比webpack, 我个人觉得gulp是一个较为轻量的打包工具了。本文将介绍如何使用 gulp 实现纯 HTML、CSS、Bootstrap 的打包。
yaogengzhu
2023/12/13
9041
我的前端工作流
在 Node.js 出现以前,以往的前端开发工作属于石器时代。而随着前端技术的大爆炸来临,我们需要赶上这一次潮流,加入到前端开发到摩登时代去。这篇博文主要是记录如何构建前端工作流。
零式的天空
2022/03/22
7900
webpack快速构建项目
webpack是什么我在这里就不多说了,实在不知道的可以直接在去搜一下,都一大堆答案。关于用webpack怎么构建项目,方法也是多种多样,五花八门。今天,我就写下我平常构建项目的方式,这个方式我觉得比较便捷和简单粗暴,如果有什么要指出的,也欢迎大家评论,毕竟我也只是一个前端新人。
守候i
2018/08/22
8660
webpack快速构建项目
一步一步创建vue2.0项目(一)
新建一个文件夹 vue2.0-learn 。_前提是默认已经安装了nodejs和npm_
frontoldman
2019/09/02
6700
Gulp安装流程、使用方法及cmd常用命令导览
Gulp安装流程、使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结     一、名词介绍: Npm——node包管理工具 一开始我不理解,包管理工具是什么鬼。后来用到的gulp也好,gulp的插件包也好,都是要在npm这个里边弄出来的。 可以理解为,一个硬盘,里边放的各种整理好的、适用于各种功能的且不重复的文件夹(插件),然后我们需要啥,就去里边摘下来。 当然也可以用它来删除插件 rimraf删除gulp的模块插件 1、安装:npm install -g rimraf(全局安装),如果
xing.org1^
2018/05/17
2.5K0
转 入门Webpack,看这篇就够了
2017年8月13日更新,本文依旧最新的webpack3.5.3将代码部分完全重写,所有代码都在Mac上正常运行过。希望依旧对你学习webpack有帮助。 写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过;如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失;如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终
jojo
2018/05/03
1.7K0
Webpack学习总结 【原创】
Webpack学习总结 Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com QQ: 1724338257 目录导航 Webpack学习总结 1. Webpack 与 Gulp / Grunt 对比 2. 安装 2.1 创建package.json文件 2.2 安装Webpack作为依赖包
CS逍遥剑仙
2018/04/28
2.5K0
npm 及vue,router,webpack安装 快速起步
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
多凡
2019/11/01
1.2K0
相关推荐
rollup打包入门到实践
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档