『壹』 前端通過gulp編譯後的文件,怎麼部署到伺服器
伺服器上寫部署腳本,從代碼庫里拉項目代碼,跑gulp自動化。或者打包傳給後端讓他搞。
『貳』 大公司里怎樣開發和部署前端代碼
雖然美團不是大公司,但在這里寫一下我們的情況,僅供參考。開發時的和部署時類庫的引用和存放是一致還是不同?開發環境和部署環境的類庫代碼都是相同的,但物理位置不同。部署環境的類庫在CDN上,開發環境的類庫在開發伺服器上。模塊放在項目中還是放在 CDN 之類伺服器?模塊放在項目中,部署時都在CDN上。渲染網頁用 Nginx 還是其他動態語言的 Web 伺服器?前面用ngnix做負載均衡,後面用apache做web伺服器。製作網頁的流程, 是現有設計師的稿, 還是先看模塊?先有設計師的稿再寫模塊,但很多時候並不需要設計師,因為架子已經搭好了,界面規范和基礎元素都有,一般的界面前端工程師都能搞得定。會選擇用自己寫的模塊還是從社區尋找模塊?基礎框架用的YUI3,大部分二次開發的底層模塊,還有和業務緊密結合的UI模塊都是自己寫的。當然也會用社區寫的模塊,比如上傳組件、highcharts、Ace等。如果說怎麼選擇模塊的話,那就是具體情況具體分析了,總體原則有兩個:能不自己寫,就不自己寫;選擇最符合需求的,一般來說,要麼選最好的,要麼選最快出結果的。
『叄』 前端使用@vue/[email protected]打包,路由懶載入vue文件打包缺失,年初2月份的時候還能正常打包
不要 使用3.5以上的版本 很容易出現問題
你應該 使用穩定版
給你個 建議 更換版本
『肆』 前端的代碼怎麼部署到伺服器
1、安裝護衛神主機大師,一鍵配置全能網站環境
2、用主機大師開設網站,並綁定域名
3、解析域名到伺服器IP
4、FTP上傳前端代碼到伺服器
5、輸入域名即可訪問前端代碼了
『伍』 怎麼講前端的代碼打包成web app
方法/步驟
下載安裝MyEclipse2014,Android SDK,eclipse(需配置Android開發環境)
Java和Android環境安裝與配置,將另寫經驗分享,讀者也可網路參考其他相關資料,自行安裝
打開MyEclipse2014,新建一個HTML5 Mobile Application Project,命名,例如:hello
html5程序在工程www目錄下編輯;
編輯好我們的html5程序,下面就要開始學習打包了
這里介紹兩種打包方式:1、PhoneGap Build Service 打包
PhoneGap官網有相關教程可參考,不具體介紹
2、android SDK +eclispe 打包
android SDK +eclispe 打包(前提已配置好,android開發環境):
Step1、啟動eclipse,新建Android Application Project,即Android工程,命名,例如:hello
Step2、將前面Myeclipse2014中編輯好的HTML5程序(www整個目錄)拷至剛剛在eclipse新建hello工程對應assets目錄下面
Step3、下面要做的就是如何將我們的HTML5程序在Android應用中啟動,這里我們要使用Android系統自帶的WebView控制項(具體信息參考Adroid開發文檔)---在工程下找到res->layout->activity_main.xml並打開,向裡面插入WebView控制項,編輯好自己想要的樣式
Step4、在主程序入口,用剛剛編輯好的WebView控制項將HTML5程序引入,此時,主體功能已實現,編譯工程即可得到apk
『陸』 常見的前端集成部署方案有哪些各自的優缺點是什麼
前端行業經歷了這么長時間的發展,技術元素非常豐富,這里列舉出一般web團隊需要用到的技術元素:
開發規范:包括開發、部署的目錄規范,編碼規范等。不要小瞧規范的威力,可以極大的提升開發效率,真正優秀的規范不會讓使用者感到約束,而是能幫助他們快速定位問題,提升效率。
模塊化開發:針對js、css,以功能或業務為單元組織代碼。js方面解決獨立作用域、依賴管理、api暴露、按需載入與執行、安全合並等問題,css方面解決依賴管理、組件內部樣式管理等問題。是提升前端開發效率的重要基礎。現在流行的模塊化框架有requirejs、seajs等。
組件化開發:在模塊化基礎上,以頁面小部件(component)為單位將頁面小部件的js、css、html代碼片段放在一起進行開發、維護,組件單元是資源獨立的,組件在系統內可復用。比如頭部(header)、尾部(footer)、搜索框(searchbar)、導航(menu)、對話框(dialog)等,甚至一些復雜的組件比如編輯器(editor)等。通常業務會針對組件化的js部分進行必要的封裝,解決一些常見的組件渲染、交互問題。
組件倉庫:有了組件化,我們希望將一些非常通用的組件放到一個公共的地方供團隊共享,方便新項目復用,這個時候我們就需要引入一個組件倉庫的東西,現在流行的組件庫有bower、component等。團隊發展到一定規模後,組件庫的需求會變得非常強烈。
性能優化:這里的性能優化是指能夠通過工程手段保證的性能優化點。由於其內容比較豐富,就不在這里展開了,感興趣的同學可以閱讀我的這兩篇文章 [1] [2]。性能優化是前端項目發展到一定階段必須經歷的過程。這部分我想強調的一點是性能優化一定是一個工程問題和統計問題,不能用工程手段保證的性能優化是不靠譜的,優化時只考慮一個頁面的首次載入,不考慮全局在宏觀統計上的優化提升也是片面的。
項目部署:部署按照現行業界的分工標准,雖然不是前端的工作范疇,但它對性能優化有直接的影響,包括靜態資源緩存、cdn、非覆蓋式發布等問題。合理的靜態資源資源部署可以為前端性能帶來較大的優化空間。
開發流程:完整的開發流程包括本地開發調試、視覺效果走查確認、前後端聯調、提測、上線等環節。對開發流程的改善可以大幅降低開發的時間成本,工作這些年見過很多獨立的系統(cms系統、靜態資源推送系統)將開發流程割裂開,對前端開發的效率有嚴重的阻礙。
開發工具:這里說的工具不是指IDE,而是工程工具,包括構建與優化工具、開發-調試-部署等流程工具,以及組件庫獲取、提交等相關工具,甚至運營、文檔、配置發布等平台工具。前端開發需要工具支持,這個問題的根本原因來自前端領域語言特性(未來我會單獨寫一篇文章介紹前端領域語言缺陷問題)。前端開發所使用的語言(js、css、html)以及前端工程資源的載入與定位策略決定了前端工程必須要工具支持。由於這些工具通常都是獨立的系統,要想把它們串聯起來,才有了yeoman這樣的封裝。前面提到的7項技術元素都直接或間接的對前端開發工具設計產生一定的影響,因此能否串聯其他技術要素,使得前端開發形成一個連貫可持續優化的開發體系,工具的設計至關重要。
『柒』 webpack打包後的代碼,如何部署到伺服器上
本文章前端代碼是基於vue+webpack開發的
Nginx是一款輕量級的Web 伺服器/反向代理伺服器
首先,webpack配置如下
在開發過程中,我們是通過npm run dev在開發環境中運行代碼
如果要部署到生產環境中,可以運行npm run build進行上線打包
打包完成後,會發現項目中多了dist這個文件夾
執行結果和webpack的配置文件一致。
代碼被webpack打包完成後下一步就是部署到伺服器上,此文僅適合於前端代碼是部署在windows操作系統的nginx服務中。
這里假設:
Windows操作系統:windows server 2008 64位
Nginx服務:nginx-1.12.2 64位
1.下載nginx-1.12.2 64位解壓,假設nginx-1.12.2放在D:nginx-1.12.2目錄中,nginx目錄結構。如圖下
2、前端代碼放在D:nginx-1.12.2html目錄中,dist目錄就是剛剛前端打包完的代碼。如圖下
3、在D:nginx-1.12.2conf目錄中,有個nginx.conf配置文件,進行編輯這個文件
4、假設前端的埠號為8082,如果埠號被佔用,請修改為其它埠號。後台服務訪問地址http://192.168.121.**:8080,
5、打開cmd控制台,進入目錄D:nginx-1.12.2中,用start nginx命令啟動服務,然後用tasklist /fi "imagename eq nginx.exe",查看nginx服務是否啟動。
4、如果改變配置文件時,需要用nginx -s reload 命令重啟nginx工作進程。
5、關閉服務
nginx -s stop
nginx -s quit 安全關閉
taskkill /F /IM nginx.exe > nul 關閉所有nginx服務
『捌』 一個前端頁面如何部署
一個前端頁面,在本地直接打開就能訪問。另外如果是要放到伺服器下的話,可以裝個nginx,或者apache,或者tomcat,直接放到網頁路徑下,就行。
『玖』 在自己搭建的gitlab中,能部署用戶可訪問的前端打包文件嗎
不知道 自建的gitLab 是否有 pages服務,
但是你既然有自己的伺服器,應該是可以通過 Nginx 配置 ,將路徑映射到你打包後的目錄中去。這個是可以實現的
nginx 靜態文件伺服器的配置請網路。
『拾』 前後端分離的前端是怎麼部署到生產環境中的,直接通過 nginx 嗎
front-end-separate(前後端分離腳手架)
front-end-separate
一個前後端分離的腳手架工具(自主研發)
為什麼選擇grunt而不是gulp
如果你也和我一樣喜歡grunt這種配置的方式,那麼我相信這個腳手架覺對十分適合你
所有靜態資源都md5全並壓縮打包,css,js,img,html
已在生產環境驗證
基於express和grunt的前後端分離框架
模板引擎使用的是nunjucks,好處是可以實現模版繼承,又不像jade一樣把html標簽都簡化了
express提供路由服務
項目中app為原代碼文件(開發用),dist為打包後的文件(用於線上)
開發使用app,線上使用dist,支持一鍵cdn部署,加速你的項目
項目啟動時,修改任何express代碼,可以實現自動重啟–基於nodemon
支持sass圖片精靈(自動打包精靈圖片,再也不用手動去拼湊了)
基於grunt md5 打包合並
線上輸出的html已經壓縮成一行(讓你的代碼更有Geeker范)