摘要:通過官方的生成器,他們建立了一個的工作流,這個流是由一個強大的固定的客戶端組建,包含工具和框架幫助開發者快速建立牛逼的應用。
原文還是在簡書上: Yeoman-- 一個強大的前端構建工具,我只是自己的搬運工!!
上期跟大家試了試Vue-cli這個構建工具,這個讓我想起了很多其他的前端工具,其中一個就是Yeoman(上次就劇透了的),所以這期跟大家先簡單介紹下這個腳手架工具,然后慢慢一步步深入下去。
先說說Yeoman是什么,它想做什么?Yeamon幫助你快速的開展一個項目工程,提供最佳實踐和工具,來讓你保持高效率編碼。
他們自己提供了一個構建生態系統,主要通過‘yo’這個命令來構建一個完整的項目或者項目的一部分。
通過官方的生成器,他們建立了一個Yeoman的工作流,這個流是由一個強大的,固定的客戶端組建,包含工具和框架幫助開發者快速建立牛逼的web應用。他們盡量提供了開發者所需的東西。
作為良好文檔和深入思考構建過程的思想者,Yeoman包含了檢測(靜態檢測)、測試以及壓縮等等一系列工具,讓開發者能夠更加專注于思考解決方案。
Yeoman其實是3個工具的總和:
yo --- 腳手架,自動生成工具
Grunt、gulp --- 構建工具 (最初只有grunt,后面gulp火了添加進來的)
Bower、npm --- 包管理工具 (原來是 bower,后面添加了npm)
上面的三個是各自獨立發展和運行的,混合后效果就不一樣,主要在于yo,相當于一個粘合劑一樣,把grunt這些工具粘合在一起。
安裝方式,一行代碼
npm install -g yo //權限不夠,請加上 sudo,一般來說mac都需要。
安裝完成之后,你就擁有了1個命令 -- yo
看到,使用時,官方已經在提示你了,我們選擇 Install a generator,輸入react,得到很多選擇,我選擇了 react-fullstack(如果安裝需要權限,sudo yo即可,注意看安裝失敗的log)
接著等待安裝,進度條時間,談談這個命令,yo這個命令跟前面vue-cli一樣,現在下載的generator其實就是相當于模板一樣,來生成你需要的project的最基本架構,包括你主要使用的框架-- react、angular、polymer、backbone、ember,構建工具---grunt、gulp、webpack等,現在還包括了nodejs的模塊--express、node-webkit等等一系列各種工具。
官方生成器: http://yeoman.io/generators/
如果不用yo命令來安裝generator,可以自己手動安裝你想要的:
npm install -g generator-react-fullstack // 記得權限,記得給包前面加上generator.
裝完界面變成這個樣子了,我們選擇generator,run一下。
同樣,我們需要填寫一個信息來配置下項目名稱,又是進度條時間。
現在你可以看見你的文件夾下面已經有新的文件和文件夾建立出來,等待完成,然后
npm run start
頁面如圖所示:
這個項目挺值得研究的,他比 Tj大神的frontend-boilerplate這個復雜,而且使用的東西更多。具體可以參考它的github主頁。
我們可以看到的是,幾個簡單的命令,Yeoman就幫助我們建立一個項目,而且項目已經填充了不少代碼,我們可以選擇一個自己喜歡的,來沿著別人的已經搭建好的構架來編寫業務即可,這對很多新手來說是非常好的一種提高方式,所以建議大家選star多的 ---代碼風格好,文件夾規劃清晰,js的模塊拆分細致合理。
那么我們再后面的某一期來實踐下,編寫一個自己的generator玩玩
參考網站: http://yeoman.io/;
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78523.html
摘要:通過官方的生成器,他們建立了一個的工作流,這個流是由一個強大的固定的客戶端組建,包含工具和框架幫助開發者快速建立牛逼的應用。 原文還是在簡書上: Yeoman-- 一個強大的前端構建工具,我只是自己的搬運工!! 上期跟大家試了試Vue-cli這個構建工具,這個讓我想起了很多其他的前端工具,其中一個就是Yeoman(上次就劇透了的),所以這期跟大家先簡單介紹下這個腳手架工具,然后慢慢一步...
摘要:安裝成功的驗證方式中輸入如果輸出版本號就說明沒有問題。這里再提一點,因為國內的某些原因,通過安裝工具可能會非常慢,這里需要我們做一點修改,也就是使用淘寶鏡像。 最近看視頻學習了前端自動化的一些知識,確實讓我大開眼界。感覺前端越來越神器了。同時跟著視頻自己也嘗試運用了一些工具去構建前端項目,但是中間遇見了很多坑,磕磕絆絆的才實現了一點功能,所以打算記錄一下學習過程中的筆記。 首先列舉一下...
摘要:上下文路徑為了方便文件流的輸入輸出,使用兩種位置環境。目標上下文目標上下文定義為當前工作目錄或含文件最接近的父文件夾。這確保了用戶行為的一致。幫助用戶嚴重需要覆蓋的內容。 摘要 隨著 Web 2.0 和 HTML 5 的流行,現在的 Web 應用所能提供的功能和交互能力比之前傳統的 Web 應用要強大很多。應用的很多實現邏輯被轉移到了瀏覽器端來實現。瀏覽器不再只提供單一的數據接收和展現...
閱讀 3208·2021-09-30 09:48
閱讀 3485·2021-09-22 16:00
閱讀 1062·2019-08-30 13:08
閱讀 3098·2019-08-30 10:53
閱讀 2410·2019-08-29 18:33
閱讀 1583·2019-08-29 12:47
閱讀 896·2019-08-29 12:16
閱讀 1929·2019-08-26 12:02