前端開發(fā)工具-本地服務(wù)器

Jochen 發(fā)布于2019-07-24 10:39 / 2996人閱讀

摘要：然后直接在想要預(yù)覽的文件輸入指令優(yōu)點(diǎn)只要連接同一個(gè)，就可以多端預(yù)覽配置信息不多，方便快速預(yù)覽缺點(diǎn)不過有個(gè)需要手動(dòng)刷新靜態(tài)頁同步路徑是相對(duì)于運(yùn)行該命令的項(xiàng)目目錄指令的意思是，監(jiān)聽文件，當(dāng)文件夾后綴的文件變化時(shí)，瀏覽器自動(dòng)刷新

http-server

npm install http-server -g

然后直接在想要預(yù)覽的文件輸入
http-server 指令

優(yōu)點(diǎn)：

只要連接同一個(gè)wifi，就可以多端預(yù)覽

配置信息不多，方便快速預(yù)覽

缺點(diǎn):不過有個(gè)需要手動(dòng)刷新

BrowserSync

npm install -g browser-sync

//靜態(tài)頁同步
// --files 路徑是相對(duì)于運(yùn)行該命令的項(xiàng)目（目錄）  
//指令的意思是，監(jiān)聽index.html文件，當(dāng)css文件夾css后綴的文件變化時(shí)，瀏覽器自動(dòng)刷新
browser-sync start --server --files "css/*.css"

//代理服務(wù)器
browser-sync start --proxy "主機(jī)名" "css/*.css"
//or
browser-sync start --proxy "Browsersync.cn" "css/*.css"

注意！！！
browser-sync默認(rèn)打開index.html
如果要同步的文件名不是index.html 則使用如下指令
例：我的文件名為bower.html
browser-sync start --server --index bower.html --files="css/*.css"

優(yōu)點(diǎn)：

自動(dòng)刷新，省去手動(dòng)刷新的繁瑣

只要連接同一個(gè)wifi，就可以多端預(yù)覽

缺點(diǎn)

配置信息多，多頁面開發(fā)時(shí)，切換頁面需要重新配置

apache

我是下載了個(gè)xampp

缺點(diǎn)

無法多端預(yù)覽

資料

http-server
BrowserSync
In browser I see only : Cannot GET/

云服務(wù)器 GPU云服務(wù)器前端開發(fā)用什么前端開發(fā) 前端開發(fā)前端前端前端開發(fā) 前端開發(fā)工具

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/35863.html

相關(guān)文章

前端如何高效的與后端協(xié)作開發(fā)

摘要：移動(dòng)端應(yīng)用一般都運(yùn)行在微信瀏覽器中中手機(jī)瀏覽器中。因?yàn)槲⑿艦g覽器是定制的瀏覽器，一般的遠(yuǎn)程調(diào)試方式都不可用，需要配合特定的工具，如微信開發(fā)者工具。前端如何高效的與后端協(xié)作開發(fā) 1. 前后端分離前端與后端的分離，能使前端的開發(fā)脫離后端的開發(fā)模式，擁有更大的自由度，以此便可做前端工程化、組件化、單頁面應(yīng)用等。可以參考：前后端分離、web與static服務(wù)器分離 2. 盡量避免后端模板...

rozbo 2019-08-29 17:08 評(píng)論0 收藏0
前端如何高效的與后端協(xié)作開發(fā)

摘要：移動(dòng)端應(yīng)用一般都運(yùn)行在微信瀏覽器中中手機(jī)瀏覽器中。因?yàn)槲⑿艦g覽器是定制的瀏覽器，一般的遠(yuǎn)程調(diào)試方式都不可用，需要配合特定的工具，如微信開發(fā)者工具。前端如何高效的與后端協(xié)作開發(fā) 1. 前后端分離前端與后端的分離，能使前端的開發(fā)脫離后端的開發(fā)模式，擁有更大的自由度，以此便可做前端工程化、組件化、單頁面應(yīng)用等。可以參考：前后端分離、web與static服務(wù)器分離 2. 盡量避免后端模板...

learning 2019-08-23 12:37 評(píng)論0 收藏0
前端開發(fā)如何做好本地接口模擬

摘要：前端開發(fā)如何做好本地接口模擬之前有寫過一篇本地化接口模擬前后端并行開發(fā)，講到過本地接口模擬，但不太細(xì)致。有哪些途徑本地接口模擬一般分為工具層面和代碼層面。因?yàn)楸镜亟涌谀M功能主要是針對(duì)的返回值為格式的異步請(qǐng)求，所以這種方式主要用文件。前端開發(fā)如何做好本地接口模擬之前有寫過一篇本地化接口模擬、前后端并行開發(fā)，講到過本地接口模擬，但不太細(xì)致。這次細(xì)細(xì)的說說本地接口模擬。 1. 有什么...

ACb0y 2019-08-23 14:31 評(píng)論0 收藏0
構(gòu)建前端項(xiàng)目

摘要：解決思路服務(wù)器端渲染服務(wù)器端和前端公用同一個(gè)應(yīng)用，然后通過構(gòu)建工具及配置，確定哪些組件需要再服務(wù)器端渲染，那些組件需要再客戶端渲染。服務(wù)器端渲染，由框架與構(gòu)建工具配合，并依據(jù)一定的項(xiàng)目結(jié)構(gòu)和編碼方式，共同運(yùn)行。分離為什么需要前后端分離、web服務(wù)器與static服務(wù)器分離: 前端與后端耦合 (需求) 自動(dòng)化、工程化的構(gòu)建前端的代碼 (基礎(chǔ)條件) 模塊化、組件化，項(xiàng)目共享代碼 (...

mindwind 2019-08-23 13:51 評(píng)論0 收藏0
淺析git

摘要：淺析筆者在此整理了常見的命令，的重要性無需多言，與其再百度海中搜索命令，不妨嘗試收藏筆者的此篇作品。旨在快速高效地處理無論規(guī)模大小的任何軟件工程。其最大特色就是分支及合并操作非常快速簡便。淺析git 筆者在此整理了常見的git命令，git的重要性無需多言，與其再百度海中搜索git命令，不妨嘗試收藏筆者的此篇作品。希望對(duì)你的學(xué)習(xí)有所幫助。版本控制系統(tǒng)之git Git: (一)簡介：G...

explorer_ddf 2019-08-02 11:53 評(píng)論0 收藏0
淺析git

摘要：淺析筆者在此整理了常見的命令，的重要性無需多言，與其再百度海中搜索命令，不妨嘗試收藏筆者的此篇作品。旨在快速高效地處理無論規(guī)模大小的任何軟件工程。其最大特色就是分支及合并操作非常快速簡便。淺析git 筆者在此整理了常見的git命令，git的重要性無需多言，與其再百度海中搜索git命令，不妨嘗試收藏筆者的此篇作品。希望對(duì)你的學(xué)習(xí)有所幫助。版本控制系統(tǒng)之git Git: (一)簡介：G...

Neilyo 2019-08-29 17:07 評(píng)論0 收藏0