資訊專(zhuān)欄INFORMATION COLUMN
摘要：通過(guò)官方的生成器，他們建立了一個(gè)的工作流，這個(gè)流是由一個(gè)強(qiáng)大的固定的客戶端組建，包含工具和框架幫助開(kāi)發(fā)者快速建立牛逼的應(yīng)用。
原文還是在簡(jiǎn)書(shū)上： Yeoman-- 一個(gè)強(qiáng)大的前端構(gòu)建工具,我只是自己的搬運(yùn)工！！
上期跟大家試了試Vue-cli這個(gè)構(gòu)建工具，這個(gè)讓我想起了很多其他的前端工具，其中一個(gè)就是Yeoman（上次就劇透了的）,所以這期跟大家先簡(jiǎn)單介紹下這個(gè)腳手架工具，然后慢慢一步步深入下去。
先說(shuō)說(shuō)Yeoman是什么，它想做什么？Yeamon幫助你快速的開(kāi)展一個(gè)項(xiàng)目工程，提供最佳實(shí)踐和工具，來(lái)讓你保持高效率編碼。
他們自己提供了一個(gè)構(gòu)建生態(tài)系統(tǒng)，主要通過(guò)‘yo’這個(gè)命令來(lái)構(gòu)建一個(gè)完整的項(xiàng)目或者項(xiàng)目的一部分。
通過(guò)官方的生成器，他們建立了一個(gè)Yeoman的工作流，這個(gè)流是由一個(gè)強(qiáng)大的,固定的客戶端組建，包含工具和框架幫助開(kāi)發(fā)者快速建立牛逼的web應(yīng)用。他們盡量提供了開(kāi)發(fā)者所需的東西。
作為良好文檔和深入思考構(gòu)建過(guò)程的思想者，Yeoman包含了檢測(cè)（靜態(tài)檢測(cè)）、測(cè)試以及壓縮等等一系列工具，讓開(kāi)發(fā)者能夠更加專(zhuān)注于思考解決方案。
Yeoman其實(shí)是3個(gè)工具的總和：
yo --- 腳手架，自動(dòng)生成工具
Grunt、gulp --- 構(gòu)建工具 （最初只有g(shù)runt，后面gulp火了添加進(jìn)來(lái)的）
Bower、npm --- 包管理工具 （原來(lái)是 bower，后面添加了npm）
上面的三個(gè)是各自獨(dú)立發(fā)展和運(yùn)行的，混合后效果就不一樣，主要在于yo，相當(dāng)于一個(gè)粘合劑一樣，把grunt這些工具粘合在一起。
安裝方式，一行代碼
npm install -g yo //權(quán)限不夠，請(qǐng)加上 sudo，一般來(lái)說(shuō)mac都需要。
安裝完成之后，你就擁有了1個(gè)命令 -- yo
看到，使用時(shí)，官方已經(jīng)在提示你了，我們選擇 Install a generator，輸入react，得到很多選擇，我選擇了 react-fullstack（如果安裝需要權(quán)限，sudo yo即可，注意看安裝失敗的log）
接著等待安裝，進(jìn)度條時(shí)間，談?wù)勥@個(gè)命令，yo這個(gè)命令跟前面vue-cli一樣，現(xiàn)在下載的generator其實(shí)就是相當(dāng)于模板一樣，來(lái)生成你需要的project的最基本架構(gòu)，包括你主要使用的框架-- react、angular、polymer、backbone、ember，構(gòu)建工具---grunt、gulp、webpack等，現(xiàn)在還包括了nodejs的模塊--express、node-webkit等等一系列各種工具。
官方生成器： http://yeoman.io/generators/
如果不用yo命令來(lái)安裝generator，可以自己手動(dòng)安裝你想要的:
npm install -g generator-react-fullstack // 記得權(quán)限，記得給包前面加上generator.
裝完界面變成這個(gè)樣子了，我們選擇generator，run一下。
同樣，我們需要填寫(xiě)一個(gè)信息來(lái)配置下項(xiàng)目名稱(chēng),又是進(jìn)度條時(shí)間。
現(xiàn)在你可以看見(jiàn)你的文件夾下面已經(jīng)有新的文件和文件夾建立出來(lái)，等待完成，然后
npm run start
頁(yè)面如圖所示：
這個(gè)項(xiàng)目挺值得研究的，他比 Tj大神的frontend-boilerplate這個(gè)復(fù)雜，而且使用的東西更多。具體可以參考它的github主頁(yè)。
我們可以看到的是，幾個(gè)簡(jiǎn)單的命令，Yeoman就幫助我們建立一個(gè)項(xiàng)目，而且項(xiàng)目已經(jīng)填充了不少代碼，我們可以選擇一個(gè)自己喜歡的，來(lái)沿著別人的已經(jīng)搭建好的構(gòu)架來(lái)編寫(xiě)業(yè)務(wù)即可，這對(duì)很多新手來(lái)說(shuō)是非常好的一種提高方式，所以建議大家選star多的 ---代碼風(fēng)格好，文件夾規(guī)劃清晰，js的模塊拆分細(xì)致合理。
那么我們?cè)俸竺娴哪骋黄趤?lái)實(shí)踐下，編寫(xiě)一個(gè)自己的generator玩玩
參考網(wǎng)站： http://yeoman.io/；
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78523.html
摘要：通過(guò)官方的生成器，他們建立了一個(gè)的工作流，這個(gè)流是由一個(gè)強(qiáng)大的固定的客戶端組建，包含工具和框架幫助開(kāi)發(fā)者快速建立牛逼的應(yīng)用。 原文還是在簡(jiǎn)書(shū)上： Yeoman-- 一個(gè)強(qiáng)大的前端構(gòu)建工具,我只是自己的搬運(yùn)工！！ 上期跟大家試了試Vue-cli這個(gè)構(gòu)建工具，這個(gè)讓我想起了很多其他的前端工具，其中一個(gè)就是Yeoman（上次就劇透了的）,所以這期跟大家先簡(jiǎn)單介紹下這個(gè)腳手架工具，然后慢慢一步...
摘要：簡(jiǎn)介前端發(fā)展迅速，開(kāi)發(fā)者富有的創(chuàng)造力不斷的給前端生態(tài)注入新生命，各種庫(kù)框架工程化構(gòu)建工具層出不窮，眼花繚亂，不盲目追求前沿技術(shù)，學(xué)習(xí)框架和庫(kù)在滿足自己開(kāi)發(fā)需求的基礎(chǔ)上，然后最好可以對(duì)源碼進(jìn)行調(diào)研，了解和深入實(shí)現(xiàn)原理，從中可以獲得更多的收獲隨 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...
摘要：安裝成功的驗(yàn)證方式中輸入如果輸出版本號(hào)就說(shuō)明沒(méi)有問(wèn)題。這里再提一點(diǎn)，因?yàn)閲?guó)內(nèi)的某些原因，通過(guò)安裝工具可能會(huì)非常慢，這里需要我們做一點(diǎn)修改，也就是使用淘寶鏡像。 最近看視頻學(xué)習(xí)了前端自動(dòng)化的一些知識(shí)，確實(shí)讓我大開(kāi)眼界。感覺(jué)前端越來(lái)越神器了。同時(shí)跟著視頻自己也嘗試運(yùn)用了一些工具去構(gòu)建前端項(xiàng)目，但是中間遇見(jiàn)了很多坑，磕磕絆絆的才實(shí)現(xiàn)了一點(diǎn)功能，所以打算記錄一下學(xué)習(xí)過(guò)程中的筆記。 首先列舉一下...
摘要：上下文路徑為了方便文件流的輸入輸出，使用兩種位置環(huán)境。目標(biāo)上下文目標(biāo)上下文定義為當(dāng)前工作目錄或含文件最接近的父文件夾。這確保了用戶行為的一致。幫助用戶嚴(yán)重需要覆蓋的內(nèi)容。 摘要 隨著 Web 2.0 和 HTML 5 的流行，現(xiàn)在的 Web 應(yīng)用所能提供的功能和交互能力比之前傳統(tǒng)的 Web 應(yīng)用要強(qiáng)大很多。應(yīng)用的很多實(shí)現(xiàn)邏輯被轉(zhuǎn)移到了瀏覽器端來(lái)實(shí)現(xiàn)。瀏覽器不再只提供單一的數(shù)據(jù)接收和展現(xiàn)...
閱讀 3241·2021-09-30 09:48
閱讀 3526·2021-09-22 16:00
閱讀 1090·2019-08-30 13:08
閱讀 3129·2019-08-30 10:53
閱讀 2441·2019-08-29 18:33
閱讀 1614·2019-08-29 12:47
閱讀 921·2019-08-29 12:16
閱讀 1956·2019-08-26 12:02
