前端構建和模塊化工具-coolie

【前言】

假設你以前用過前端模塊化工具：seajs。requirejs。

用過前端構建工具grunt、gulp,

並且感到了一些不方便和痛苦，那麼你可以試試coolie

【coolie】

本文不是一篇介紹coolie的文章。而是偏向新手上手coolie的常見問題解答，

coolie相關：

社區文章：http://frontenddev.org/column/introduce-coolie/

git-book：http://coolie.ydr.me/index.html

【知識儲備】

假設你沒實用過前端模塊化。沒實用過前端構建，沒有聽過nodejs，

還請先百度google之，當初步瞭解以上內容。使用過一段時間在看這篇文章，

在使用coolie。你會發現coolie的長處所在。

【聲明】

關於js模塊化，前端構建的內容，使用的時間比較久，版本號比較舊，

僅僅是憑記憶說說。不是很是準確，可能現在這些工具已經很是無缺了。

【可以作什麼-模塊化】

老生長談的問題。請自行百度之，

簡單的來講就是管理各個js，模塊化的使用js。相似java中的import+jar。

可以看看這篇文章：http://uikoo9.com/blog/detail/java-vs-nodejs-reactjs-angularjs-requirejs-seajs

【可以作什麼-構建】

假設你經常改動js，css，恰巧大家服務端會作緩存。

那你應該知道相似這樣有多痛苦：jquery.js?v=1。

。。

上兩張圖，對照下構建前的項目，和構建後的項目。請自行意會：

這張圖是正常的項目。當中html中假設要引入js，css，解決服務端緩存的辦法就是?v=xxx，

每次改動都得改動版本。改動工具類js還得批量替換版本。很是是痛苦。

這張是構建後的項目。你會發現幾點：

所有靜態資源文件名稱編碼化。

而且假設有改動。構建後這個編碼的名稱會本身主動改動，

結果就是html中的js，css照樣寫，對付服務端緩存，直接構建，

因爲每次都不一樣。

【學習coolie】

請閱讀頂部兩個coolie連接內容，學習後開始本身上手，你大概會碰上如下這些問題。

【準備工做】

1.安裝nodejs--百度去

2.安裝coolie

運行npm install -g coolie

3.下載coolie樣例

https://github.com/cloudcome/coolie-example/

【問題1-構建】

官網僅僅說了coolie build webroot-dev這個命令，

但是在哪裏運行，在哪一個文件夾下運行，？

咱們想看看樣例的文件結構：

事實上這個build命令就是去找coolie.json配置文件，

因此假設你cd到webroot-dev下的話，可以直接coolie build構建。

假設你在webroot-dev父一級文件夾。可以coolie build webroot-dev，

假設你在webroot-dev同級的還有一個目錄test內。你可以coolie build ../webroot-dev。

也就是說coolie build path，這個path中要有coolie.json

【問題2-文件結構和配置文件】

不一樣於其它的一些構建工具，coolie中，僅僅要你遵循默認的文件結構，那coolie.json你基本是不需要改動的。

默認的文件結構如上圖，

簡單的說就是，按默認結構去開發，而後忘記coolie.json

【問題3-頁面約定】

上面談到文件結構約定，是爲了構建方便，

那頁面約定就是爲了，構建可以正常工做和模塊化正常工做。

css約定：

將要構建的css這樣寫：

    <!--coolie-->
    <link rel="stylesheet" href="/static/css/common.css">
    <link rel="stylesheet" href="/static/css/index.css">
    <!--/coolie-->

寫到兩段凝視中間，不想構建的css則放到外頭。

js約定：

<!-- mine -->
<script coolie src="/static/js/coolie.min.js" data-config="./coolie-config.js" data-main="./index.js"></script>

用過模塊化工具的人應該好理解。僅僅是coolie的路徑有點繞。看看官網說明吧，

或者按約定文件結構照貓畫虎吧。

【問題4-不想構建】

假設碰到不想構建的靜態文件，請在coolie.json中配置，

coolie.json也就是以前說的需要忘記的東西。但是這個配置在我看來是惟一的用處，

【問題5-http以及絕對路徑】

假設你習慣用直接打開html的方式看頁面，那會發現很是多問題，

來吧跑起來看吧。用http看，而後頁面所有靜態文件請寫絕對路徑，

好比：/static/img/xx.png

也就是你的http訪問加上上面的路徑可以正確看到圖片。

怎樣http？java。php，。net都有本身的方法，

前端也有，

請npm install -g sts

cd到webroot-dev

sts 8082就能夠

【開始happy】

1.依照文件文件夾約定建立項目

2.依照頁面約定開始寫頁面

記住上面的css和js約定就能夠，

另外假設習慣使用jquery，bootstrap等工具框架，可以直接引入到頁面。（贊~~）

同一時候在js中也可以直接使用$，再贊一個~~

3.查看開發效果

寫完後。用上述sts 8082查看效果

4.構建

coolie build path

5.查看構建效果

cd到webroot-pro後sts 8083查看效果。

【爲啥happy】

1.壓縮&合併

壓縮靜態文件，下降每次請求文件大小

合併靜態文件，下降請求次數

2.js模塊化

從一堆js苦海中脫離出來，該幹什麼的js幹什麼。而且可以很是方便的找到它

3.構建

脫離服務端緩存和？v=xx的苦海

【不少其它】

不少其它文章，請訪問：http://uikoo9.com