資訊專欄INFORMATION COLUMN
摘要：自定義前端構(gòu)建工具生成器近期公司前端一直在做效率提升，流程優(yōu)化，很榮幸這個擔(dān)子落在了我身上，除了一些培訓(xùn)，分享之外，自己弄了個基于的前端構(gòu)建環(huán)境生成器，在此分享給大家，覺得有用的請試用。，不出意料的話，構(gòu)建環(huán)境已經(jīng)生成完畢了。
自定義前端構(gòu)建工具生成器generator-pg-cloud
近期公司前端一直在做效率提升，流程優(yōu)化，很榮幸這個擔(dān)子落在了我身上，除了一些培訓(xùn)，分享之外，自己弄了個基于yeoman的前端構(gòu)建環(huán)境生成器，在此分享給大家，覺得有用的請試用。
好了，言歸正傳，這個生成器的名字如標(biāo)題所示，叫做generator-pg-cloud,后面的代表我在公司所屬的部門，大家就不要care了。最新版本的應(yīng)該是1.4.3版本了，之間經(jīng)歷過很多次各種大改小改，現(xiàn)在還算基本滿意吧。
準(zhǔn)備工作：請準(zhǔn)備好nodejs環(huán)境，安裝yeoman,這是最基本的，如果想使用單元測試，請安裝mocha,不知道如何安裝的自行百度，不再贅述。
YES!,現(xiàn)在該本文的正角兒出場了，$npm install -g generator-pg-cloud,如果沒有報錯，相信生成器已經(jīng)安裝在你電腦上的nodejs根目錄了。
現(xiàn)在讓我們新建一個工程目錄，$mkdir demo && cd demo，進入demo文件夾之后，運行$yo,如果在選項中沒有出現(xiàn)PG CLOUD，那么運行$npm link generator-pg-cloud將生成器鏈接進工程環(huán)境。也可以直接運行$yo pg-cloud直接安裝，安裝過程中會出現(xiàn)在一些選項提示，按照自己的需求來就好了。
OK，不出意料的話，構(gòu)建環(huán)境已經(jīng)生成完畢了?，F(xiàn)在讓我們看看目錄里面有些啥東西：
app文件夾：我們就在這里面寫代碼
bower_components文件夾：前端包管理器的文件夾，不知道bower的自己百度吧
node_modules文件夾：不用多說，環(huán)境所依賴的node插件
test文件夾：單元測試框架mocha的文件夾
tmp文件夾：browserify編譯JS文件的存儲文件夾
gitignore：git提交忽略列表，像node_modules這類巨大的文件夾是不會提交的
bower.json：bower的配置文件
package.json：npm包管理配置文件
gulpfile.js 構(gòu)建工具的核心文件基于gulp,不要問我為啥不用grunt啦，grunt哪有這么飄逸？沒它就玩不了
gulpfile.js 提供如下功能：
$gulp serve 啟動一個localhost,默認(rèn)端口9090,會自動調(diào)用瀏覽器并打開,結(jié)果browser-async插件，當(dāng)文件改變時，自動刷新瀏覽器，如果你使用了一些需要編譯的寫法，例如基于commmonjs規(guī)范的require,ECMAScript6語法，React的JSX語法，browserify會自動幫你編譯文件到.tmp文件，你只需要在html文件夾里面指定需要編譯的script標(biāo)簽，給這個標(biāo)簽加一個屬性browserify="入口文件路徑",詳見demo
$gulp jshint 利用jshint插件對語法進行檢查
$gulp wiredep 自動依賴注入，當(dāng)你使用bower安裝了一個插件，例如jquery,這個命令可以讓所有html頁面都導(dǎo)入這個插件，免去痛苦的手動修改，如果此時gulp serve正在運行，則更會自動幫你注入，$gulp wiredep都免去了。
$gulp images 壓縮app/resource文件夾下的資源文件圖片，免去手動壓縮
$gulp default 構(gòu)建整個項目，生成一個新的項目文件夾dist,壓縮各種html,css,js文件，壓縮資源等等。
$gulp parsePath 將html文件中的絕對引用路徑都替換成相對路徑,主要是為了解決我們公司線上服務(wù)器和構(gòu)建環(huán)境差了一級目錄的問題.
$gulp dist 啟動構(gòu)建目錄的環(huán)境，這時主要是為了看看構(gòu)建生成的目錄有沒有問題，報錯之類的。
$gulp debug 創(chuàng)建一個debug服務(wù)，這個功能主要是針對手機端調(diào)試打印log的,你需要編寫一個AJAX請求，把你想打印的LOG以get方式發(fā)送到localhost:3000端口，就能在命令行打印出你需要的LOG，同時打開debug.html,在這個頁面的控制臺你也能看到log信息。
OK, 現(xiàn)在工程文件夾下的dist目錄，就是你的部署目錄了。
另外講一講如何html文件中的一些規(guī)范：
build:注釋標(biāo)簽，放在build標(biāo)簽中的內(nèi)容，既表示告訴構(gòu)建工具，這些JS，或者CSS文件是需要壓縮的。
bower:注釋標(biāo)簽,bower管理器安裝的前端插件都將會自動注入到這個標(biāo)簽中。
如果你希望使用nodejs的require,或者想要使用JSX React,或者是想要使用上加入屬性browserify=‘需要編譯的JS入口文件’，那么構(gòu)建工具會自動在你寫代碼的時候幫你編譯成可執(zhí)行文件，并會自動修改script標(biāo)簽的src屬性，這個可執(zhí)行文件將會放在.tmp隱藏文件夾中。
大概就是這樣了，最后附上DEMO地址，下載之后可進入文件夾運行$npm install（因為gitignore的原因，會把工程依賴的插件都屏蔽掉，不會上傳，但是有package.json就不怕），之后運行$gulp serve就可以隨便玩了。
demo的github地址
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/85766.html
摘要：非常的龐大，而且它是完全為設(shè)計而生的動效庫。它運行于純粹的之上，是目前最強健的動畫資源庫之一?？赡苁莿?chuàng)建滾動特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性。可以通過安裝吊炸天了，接近現(xiàn)實生活中的物理運動碰撞慣性動畫庫。 收集日期為2019-02-28，★代表當(dāng)時的該項目在github的star數(shù)量 Animate.css 56401 ★ 一個跨瀏覽器的動效基礎(chǔ)庫，是許多基礎(chǔ)動...
摘要：簡介前端發(fā)展迅速，開發(fā)者富有的創(chuàng)造力不斷的給前端生態(tài)注入新生命，各種庫框架工程化構(gòu)建工具層出不窮，眼花繚亂，不盲目追求前沿技術(shù)，學(xué)習(xí)框架和庫在滿足自己開發(fā)需求的基礎(chǔ)上，然后最好可以對源碼進行調(diào)研，了解和深入實現(xiàn)原理，從中可以獲得更多的收獲隨 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...
摘要：簡介檢查我們寫的代碼是否滿足指定規(guī)則的靜態(tài)代碼檢查工具。作用作為代碼檢查工具，其作用主要有以下幾點統(tǒng)一代碼風(fēng)格規(guī)則，如縮進用幾個空格是否用駝峰命名法來命名變量和函數(shù)名等。 1、簡介： eslint檢查我們寫的 JavaScript 代碼是否滿足指定規(guī)則的靜態(tài)代碼檢查工具。 ESHint 和 JSLint 也是靜態(tài)代碼檢查工具，但伴隨著發(fā)展，他們已經(jīng)無法滿足需求，于是ESlint 誕...
摘要：如何構(gòu)建一個自己的框架為什么我們要去構(gòu)建一個自己的框架可能絕大多數(shù)的人都會說市面上已經(jīng)那么多的框架了，還造什么輪子。 showImg(https://segmentfault.com/img/bVNg9F?w=500&h=500); 如何構(gòu)建一個自己的PHP框架 為什么我們要去構(gòu)建一個自己的PHP框架？可能絕大多數(shù)的人都會說市面上已經(jīng)那么多的框架了，還造什么輪子？。我的觀點造輪子不是目...
摘要：前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。背后的故事本文是對于年之間世界發(fā)生的大事件的詳細介紹，闡述了從提出到角力到流產(chǎn)的前世今生。 前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎...
閱讀 2940·2021-11-24 10:23
閱讀 1312·2021-11-17 09:33
閱讀 2625·2021-09-28 09:41
閱讀 1675·2021-09-22 15:55
閱讀 3719·2019-08-29 16:32
閱讀 2049·2019-08-29 16:25
閱讀 1124·2019-08-29 11:06
閱讀 3515·2019-08-29 10:55
