自定義前端構建工具生成器 generator-pg-cloud

時間 2019-12-04

原文原文鏈接

自定義前端構建工具生成器generator-pg-cloud

近期公司前端一直在作效率提高，流程優化，很榮幸這個擔子落在了我身上，除了一些培訓，分享以外，本身弄了個基於yeoman的前端構建環境生成器，在此分享給你們，以爲有用的請試用。css

好了，言歸正傳，這個生成器的名字如標題所示，叫作generator-pg-cloud,後面的表明我在公司所屬的部門，你們就不要care了。最新版本的應該是1.4.3版本了，之間經歷過不少次各類大改小改，如今還算基本滿意吧。html

準備工做：請準備好nodejs環境，安裝yeoman,這是最基本的，若是想使用單元測試，請安裝mocha,不知道如何安裝的自行百度，再也不贅述。前端

YES!,如今該本文的正角兒出場了，$npm install -g generator-pg-cloud,若是沒有報錯，相信生成器已經安裝在你電腦上的nodejs根目錄了。node

如今讓咱們新建一個工程目錄，$mkdir demo && cd demo，進入demo文件夾以後，運行$yo,若是在選項中沒有出現PG CLOUD，那麼運行$npm link generator-pg-cloud將生成器連接進工程環境。也能夠直接運行$yo pg-cloud直接安裝，安裝過程當中會出如今一些選項提示，按照本身的需求來就行了。jquery

OK，不出意料的話，構建環境已經生成完畢了。如今讓咱們看看目錄裏面有些啥東西：git

app文件夾：咱們就在這裏面寫代碼
bower_components文件夾：前端包管理器的文件夾，不知道bower的本身百度吧
node_modules文件夾：不用多說，環境所依賴的node插件
test文件夾：單元測試框架mocha的文件夾
tmp文件夾：browserify編譯JS文件的存儲文件夾
gitignore：git提交忽略列表，像node_modules這類巨大的文件夾是不會提交的
bower.json：bower的配置文件
package.json：npm包管理配置文件
gulpfile.js 構建工具的核心文件基於gulp,不要問我爲啥不用grunt啦，grunt哪有這麼飄逸？沒它就玩不了

gulpfile.js 提供以下功能：github

$gulp serve 啓動一個localhost,默認端口9090,會自動調用瀏覽器並打開,結果browser-async插件，當文件改變時，自動刷新瀏覽器，若是你使用了一些須要編譯的寫法，例如基於commmonjs規範的require,ECMAScript6語法，React的JSX語法，browserify會自動幫你編譯文件到.tmp文件，你只須要在html文件夾裏面指定須要編譯的script標籤，給這個標籤加一個屬性browserify='入口文件路徑',詳見demo
$gulp jshint 利用jshint插件對語法進行檢查
$gulp wiredep 自動依賴注入，當你使用bower安裝了一個插件，例如jquery,這個命令可讓全部html頁面都導入這個插件，免去痛苦的手動修改，若是此時gulp serve正在運行，則更會自動幫你注入，$gulp wiredep都免去了。
$gulp images 壓縮app/resource文件夾下的資源文件圖片，免去手動壓縮
$gulp default 構建整個項目，生成一個新的項目文件夾dist,壓縮各類html,css,js文件，壓縮資源等等。
$gulp parsePath 將html文件中的絕對引用路徑都替換成相對路徑,主要是爲了解決咱們公司線上服務器和構建環境差了一級目錄的問題.
$gulp dist 啓動構建目錄的環境，這時主要是爲了看看構建生成的目錄有沒有問題，報錯之類的。
$gulp debug 建立一個debug服務，這個功能主要是針對手機端調試打印log的,你須要編寫一個AJAX請求，把你想打印的LOG以get方式發送到localhost:3000端口，就能在命令行打印出你須要的LOG，同時打開debug.html,在這個頁面的控制檯你也能看到log信息。

OK, 如今工程文件夾下的dist目錄，就是你的部署目錄了。npm

另外講一講如何html文件中的一些規範：json

build:註釋標籤，放在build標籤中的內容，既表示告訴構建工具，這些JS，或者CSS文件是須要壓縮的。
bower:註釋標籤,bower管理器安裝的前端插件都將會自動注入到這個標籤中。
若是你但願使用nodejs的require,或者想要使用JSX React,或者是想要使用上加入屬性browserify=‘須要編譯的JS入口文件’，那麼構建工具會自動在你寫代碼的時候幫你編譯成可執行文件，並會自動修改script標籤的src屬性，這個可執行文件將會放在.tmp隱藏文件夾中。

大概就是這樣了，最後附上DEMO地址，下載以後可進入文件夾運行$npm install（由於gitignore的緣由，會把工程依賴的插件都屏蔽掉，不會上傳，可是有package.json就不怕），以後運行$gulp serve就能夠隨便玩了。gulp

demo的github地址