資訊專欄INFORMATION COLUMN
摘要：自定義前端構建工具生成器近期公司前端一直在做效率提升，流程優化，很榮幸這個擔子落在了我身上，除了一些培訓，分享之外，自己弄了個基于的前端構建環境生成器，在此分享給大家，覺得有用的請試用。，不出意料的話，構建環境已經生成完畢了。
自定義前端構建工具生成器generator-pg-cloud
近期公司前端一直在做效率提升，流程優化，很榮幸這個擔子落在了我身上，除了一些培訓，分享之外，自己弄了個基于yeoman的前端構建環境生成器，在此分享給大家，覺得有用的請試用。
好了，言歸正傳，這個生成器的名字如標題所示，叫做generator-pg-cloud,后面的代表我在公司所屬的部門，大家就不要care了。最新版本的應該是1.4.3版本了，之間經歷過很多次各種大改小改，現在還算基本滿意吧。
準備工作：請準備好nodejs環境，安裝yeoman,這是最基本的，如果想使用單元測試，請安裝mocha,不知道如何安裝的自行百度，不再贅述。
YES!,現在該本文的正角兒出場了，$npm install -g generator-pg-cloud,如果沒有報錯，相信生成器已經安裝在你電腦上的nodejs根目錄了。
現在讓我們新建一個工程目錄，$mkdir demo && cd demo，進入demo文件夾之后，運行$yo,如果在選項中沒有出現PG CLOUD，那么運行$npm link generator-pg-cloud將生成器鏈接進工程環境。也可以直接運行$yo pg-cloud直接安裝，安裝過程中會出現在一些選項提示，按照自己的需求來就好了。
OK，不出意料的話，構建環境已經生成完畢了。現在讓我們看看目錄里面有些啥東西：
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 提供如下功能：
$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目錄，就是你的部署目錄了。
另外講一講如何html文件中的一些規范：
build:注釋標簽，放在build標簽中的內容，既表示告訴構建工具，這些JS，或者CSS文件是需要壓縮的。
bower:注釋標簽,bower管理器安裝的前端插件都將會自動注入到這個標簽中。
如果你希望使用nodejs的require,或者想要使用JSX React,或者是想要使用上加入屬性browserify=‘需要編譯的JS入口文件’，那么構建工具會自動在你寫代碼的時候幫你編譯成可執行文件，并會自動修改script標簽的src屬性，這個可執行文件將會放在.tmp隱藏文件夾中。
大概就是這樣了，最后附上DEMO地址，下載之后可進入文件夾運行$npm install（因為gitignore的原因，會把工程依賴的插件都屏蔽掉，不會上傳，但是有package.json就不怕），之后運行$gulp serve就可以隨便玩了。
demo的github地址
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85766.html
摘要：非常的龐大，而且它是完全為設計而生的動效庫。它運行于純粹的之上，是目前最強健的動畫資源庫之一。可能是創建滾動特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性。可以通過安裝吊炸天了，接近現實生活中的物理運動碰撞慣性動畫庫。 收集日期為2019-02-28，★代表當時的該項目在github的star數量 Animate.css 56401 ★ 一個跨瀏覽器的動效基礎庫，是許多基礎動...
摘要：簡介檢查我們寫的代碼是否滿足指定規則的靜態代碼檢查工具。作用作為代碼檢查工具，其作用主要有以下幾點統一代碼風格規則，如縮進用幾個空格是否用駝峰命名法來命名變量和函數名等。 1、簡介： eslint檢查我們寫的 JavaScript 代碼是否滿足指定規則的靜態代碼檢查工具。 ESHint 和 JSLint 也是靜態代碼檢查工具，但伴隨著發展，他們已經無法滿足需求，于是ESlint 誕...
摘要：如何構建一個自己的框架為什么我們要去構建一個自己的框架可能絕大多數的人都會說市面上已經那么多的框架了，還造什么輪子。 showImg(https://segmentfault.com/img/bVNg9F?w=500&h=500); 如何構建一個自己的PHP框架 為什么我們要去構建一個自己的PHP框架？可能絕大多數的人都會說市面上已經那么多的框架了，還造什么輪子？。我的觀點造輪子不是目...
摘要：前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。背后的故事本文是對于年之間世界發生的大事件的詳細介紹，闡述了從提出到角力到流產的前世今生。 前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎...
閱讀 2752·2021-11-24 10:23
閱讀 1159·2021-11-17 09:33
閱讀 2507·2021-09-28 09:41
閱讀 1420·2021-09-22 15:55
閱讀 3644·2019-08-29 16:32
閱讀 1911·2019-08-29 16:25
閱讀 1060·2019-08-29 11:06
閱讀 3427·2019-08-29 10:55
