自定義前端構(gòu)建工具生成器 generator-pg-cloud

snowell 發(fā)布于2019-08-21 10:34 / 2206人閱讀

摘要：自定義前端構(gòu)建工具生成器近期公司前端一直在做效率提升，流程優(yōu)化，很榮幸這個(gè)擔(dān)子落在了我身上，除了一些培訓(xùn)，分享之外，自己弄了個(gè)基于的前端構(gòu)建環(huán)境生成器，在此分享給大家，覺得有用的請(qǐng)?jiān)囉谩＃怀鲆饬系脑挘瑯?gòu)建環(huán)境已經(jīng)生成完畢了。

自定義前端構(gòu)建工具生成器generator-pg-cloud

近期公司前端一直在做效率提升，流程優(yōu)化，很榮幸這個(gè)擔(dān)子落在了我身上，除了一些培訓(xùn)，分享之外，自己弄了個(gè)基于yeoman的前端構(gòu)建環(huán)境生成器，在此分享給大家，覺得有用的請(qǐng)?jiān)囉谩?/p>

好了，言歸正傳，這個(gè)生成器的名字如標(biāo)題所示，叫做generator-pg-cloud,后面的代表我在公司所屬的部門，大家就不要care了。最新版本的應(yīng)該是1.4.3版本了，之間經(jīng)歷過很多次各種大改小改，現(xiàn)在還算基本滿意吧。

準(zhǔn)備工作：請(qǐng)準(zhǔn)備好nodejs環(huán)境，安裝yeoman,這是最基本的，如果想使用單元測(cè)試，請(qǐng)安裝mocha,不知道如何安裝的自行百度，不再贅述。

YES!,現(xiàn)在該本文的正角兒出場(chǎng)了，$npm install -g generator-pg-cloud,如果沒有報(bào)錯(cuò)，相信生成器已經(jīng)安裝在你電腦上的nodejs根目錄了。

現(xiàn)在讓我們新建一個(gè)工程目錄，$mkdir demo && cd demo，進(jìn)入demo文件夾之后，運(yùn)行$yo,如果在選項(xiàng)中沒有出現(xiàn)PG CLOUD，那么運(yùn)行$npm link generator-pg-cloud將生成器鏈接進(jìn)工程環(huán)境。也可以直接運(yùn)行$yo pg-cloud直接安裝，安裝過程中會(huì)出現(xiàn)在一些選項(xiàng)提示，按照自己的需求來就好了。

OK，不出意料的話，構(gòu)建環(huán)境已經(jīng)生成完畢了。現(xiàn)在讓我們看看目錄里面有些啥東西：

app文件夾：我們就在這里面寫代碼

bower_components文件夾：前端包管理器的文件夾，不知道bower的自己百度吧

node_modules文件夾：不用多說，環(huán)境所依賴的node插件

test文件夾：?jiǎn)卧獪y(cè)試框架mocha的文件夾

tmp文件夾：browserify編譯JS文件的存儲(chǔ)文件夾

gitignore：git提交忽略列表，像node_modules這類巨大的文件夾是不會(huì)提交的

bower.json：bower的配置文件

package.json：npm包管理配置文件

gulpfile.js 構(gòu)建工具的核心文件基于gulp,不要問我為啥不用grunt啦，grunt哪有這么飄逸？沒它就玩不了

gulpfile.js 提供如下功能：

$gulp serve 啟動(dòng)一個(gè)localhost,默認(rèn)端口9090,會(huì)自動(dòng)調(diào)用瀏覽器并打開,結(jié)果browser-async插件，當(dāng)文件改變時(shí)，自動(dòng)刷新瀏覽器，如果你使用了一些需要編譯的寫法，例如基于commmonjs規(guī)范的require,ECMAScript6語法，React的JSX語法，browserify會(huì)自動(dòng)幫你編譯文件到.tmp文件，你只需要在html文件夾里面指定需要編譯的script標(biāo)簽，給這個(gè)標(biāo)簽加一個(gè)屬性browserify="入口文件路徑",詳見demo

$gulp jshint 利用jshint插件對(duì)語法進(jìn)行檢查

$gulp wiredep 自動(dòng)依賴注入，當(dāng)你使用bower安裝了一個(gè)插件，例如jquery,這個(gè)命令可以讓所有html頁面都導(dǎo)入這個(gè)插件，免去痛苦的手動(dòng)修改，如果此時(shí)gulp serve正在運(yùn)行，則更會(huì)自動(dòng)幫你注入，$gulp wiredep都免去了。

$gulp images 壓縮app/resource文件夾下的資源文件圖片，免去手動(dòng)壓縮

$gulp default 構(gòu)建整個(gè)項(xiàng)目，生成一個(gè)新的項(xiàng)目文件夾dist,壓縮各種html,css,js文件，壓縮資源等等。

$gulp parsePath 將html文件中的絕對(duì)引用路徑都替換成相對(duì)路徑,主要是為了解決我們公司線上服務(wù)器和構(gòu)建環(huán)境差了一級(jí)目錄的問題.

$gulp dist 啟動(dòng)構(gòu)建目錄的環(huán)境，這時(shí)主要是為了看看構(gòu)建生成的目錄有沒有問題，報(bào)錯(cuò)之類的。

$gulp debug 創(chuàng)建一個(gè)debug服務(wù)，這個(gè)功能主要是針對(duì)手機(jī)端調(diào)試打印log的,你需要編寫一個(gè)AJAX請(qǐng)求，把你想打印的LOG以get方式發(fā)送到localhost:3000端口，就能在命令行打印出你需要的LOG，同時(shí)打開debug.html,在這個(gè)頁面的控制臺(tái)你也能看到log信息。

OK, 現(xiàn)在工程文件夾下的dist目錄，就是你的部署目錄了。

另外講一講如何html文件中的一些規(guī)范：

build:注釋標(biāo)簽，放在build標(biāo)簽中的內(nèi)容，既表示告訴構(gòu)建工具，這些JS，或者CSS文件是需要壓縮的。

bower:注釋標(biāo)簽,bower管理器安裝的前端插件都將會(huì)自動(dòng)注入到這個(gè)標(biāo)簽中。

如果你希望使用nodejs的require,或者想要使用JSX React,或者是想要使用上加入屬性browserify=‘需要編譯的JS入口文件’，那么構(gòu)建工具會(huì)自動(dòng)在你寫代碼的時(shí)候幫你編譯成可執(zhí)行文件，并會(huì)自動(dòng)修改script標(biāo)簽的src屬性，這個(gè)可執(zhí)行文件將會(huì)放在.tmp隱藏文件夾中。

大概就是這樣了，最后附上DEMO地址，下載之后可進(jìn)入文件夾運(yùn)行$npm install（因?yàn)間itignore的原因，會(huì)把工程依賴的插件都屏蔽掉，不會(huì)上傳，但是有package.json就不怕），之后運(yùn)行$gulp serve就可以隨便玩了。

demo的github地址