聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

三月 14, 2015

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 透過 https 下載套件,取代 git protocol

Git-Logo-2Color

現在前端套件幾乎都會透過 Bower 來下載,而 Bower 預設使用 git protocol 來下載原始檔案,如果遇到 timeout 逾時,也就是無法透過 git:// 方式,就必須要切換成 https:// 下載,蠻多人遇到此問題,網路上找到這篇 bower install – github.com connection timed out 解答。在 Console 視窗噴出底下錯誤訊息,就請改用 https 方式。

Additional error details: fatal: unable to connect to github.com: github.com[0: 192.30.252.130]: errno=Connection timed out

切換方式很容易,請在 Console 鍵入底下指令

$ git config --global url."https://".insteadOf git://

遇到 bower install 卡卡的也可以用這招 XD

五月 19, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 2013 Javascript Conference: 你不可不知的前端開發工具

JSDC 2013JSDC 2013

台灣第 2 屆 JavaScript 研討會在 5/18, 5/19 登場,今年報到率到 95% 了,我也給了一場 Talk,關於前端工具介紹,包含 CoffeeScript, Compass, Livereload, Bower Package Manager .. 等,最後介紹主軸 Grunt.js 來整合這些工具。

最後附上 Github 專案,歡迎大家 fork。

三月 7, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» Remove Google CDN reference for jQuery?

jquery logojquery logo

html5-boilerplate 看到有人發 Remove Google CDN reference for jQuery 的 pull request,發現國外鄉民其實蠻有趣的,也很會表達自己的想法,根據 Steve Webster 在 2011/11/21 寫了一篇 Caching and the Google AJAX Libraries 裡面的結論是: 使用 Google CDN Library 對於第一次訪問網站並沒有很大的幫助,其實這句話非常有疑問,如果網站不想 host 一些 static file 又想要用 CDN 的話,Google 絕對是最好的選擇,底下就有人反駁 Google CDN 還是比自己 host 檔案快很多,所以此 pull request 好像沒有啥意義。

最好的解法,還是把全部的 script 檔案統一包成一個檔案,減少 http request (bundling jQuery up with the rest of your site’s JavaScript),那官方期望的解決方式就是用 Bower + AMD + r.js,對於一個上線網站,假如沒有做到這些事情,我想也不用考慮到 Google CDN 的速度了。

一月 15, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» Bower 管理網站套件的好工具

bowerTwitter 團隊開發的一套網頁工具,用來管理或安裝 Web 開發所需要的 Package,像是 CSS 和 JavaScript,也可以依據套件的相依性來安裝,簡單來說,開發者不用再去煩惱套件相依性問題,以及時間久了想更新最新版本,還要到各 Package 網站來下載,這些步驟都省了,一個指令就可以全部做完上述的步驟。

安裝 Bower 管理套件

透過 Node.js 的 npm 工具來安裝

$ npm install bower -g

使用方式

可以透過 bower –help 來查看如何使用,底下來一一介紹,假設要安裝 jQuery 套件,請執行底下指令

$ bower install bootstrap spine jquery

接著該如何查詢已經安裝的套件:

$ bower list

執行上述指令,會列出專案安裝的套件名稱及版號

/home/www
├── backbone-amd#0.9.9
├── handlebars#1.0.0-rc.1
├── jquery#1.8.3
├── requirejs#2.1.2
└── underscore-amd#1.4.3

移除已安裝的套件:

$ bower uninstall jquery

升級已安裝套件:

$ bower update jquery

搜尋套件:

$ bower search jquery

Bower 設定檔

bower 預設安裝的目錄是 components 所以一般 bower install 後,你會看到專案目錄底下會多個 components/xxxx,要改變路徑其實很簡單,你可以在自己家目錄新增 ~/bowerrc 檔案,或者是在專案裡面增加 .bowerrc 設定檔,檔案內容如下

{
    "directory" : "assets/javascript/vendor",
    "json"      : "component.json"
}

這樣就可以將套件安裝在 assets/javascript/vendor 目錄

Bower 套件相依性

在專案目錄底下新增 component.json 檔案,裡面寫入

{
    "name": "xxxxx",
    "version": "1.0.0",
    "dependencies": {
        "jquery": "1.8.3",
        "backbone-amd": null,
        "underscore-amd": null,
        "requirejs": null
    }
}

完成存檔後,請在專案目錄底下執行 bower install,會發現所有套件都會被安裝到 assets/javascript/vendor 目錄,版號的定義請按照 semver 標準

上述 bower 安裝的套件,如果搭配 git 控制的話,就不要將上述安裝的原始擋加入版本控制,可以新增 assets/javascript/vendor 目錄,並且在該目錄丟入 .gitignore,接著在將 assets/javascript/vendor 寫入 .gitignore 即可。

Related View

support:

biggo.com.tw

biggo.sg

A Django site.