iT邦幫忙

DAY 12
0

Node.js 系列學習日誌系列 第 12

Node.js 系列學習日誌 #12 - bower 管理相依套件工具

『A package manager for the web』瀏覽器套件管理工具

一般在寫網頁時,多半會引入套件來使用,而 bower 就是用來管理相依套件工具,bower 是 twitter 研發,透過這樣的管理工具下載安裝 css, js 套件,讓開發者跟隨著這樣的工具,讓 web 套件 (例如: bootstrap, jquery... etc) 方面更好管理,更簡單的方式更新最新版本的套件。

當沒有管理的時候,你也許是...

  1. 直接去官方網站抓檔案,還需要記得要下載 dev 版跟 min 壓縮過的版本 (例如:https://code.jquery.com/jquery/)
  2. 找 cdn 檔案 (例如:https://developers.google.com/speed/libraries/devguide?hl=zh-tw)
  3. 乾脆用現有的 (舊版本繼續沿用)

以上的行為,多半會花一些時間一直找,而這套工具就是解決這樣的問題,只要用指令操作,效率高多囉!

本章節將學習到:

安裝 bower
使用方法
使用 express, bower 建立 bootstrap 套件的前端頁面

程式同步更新於:https://github.com/weijutu/nodejs-express-bower

安裝 bower

(安裝之前務必要有 node.js, npm, 建議儲存在 global)

$npm install bower -g

可以利用 Search Bower packages 頁面搜尋需要的套件:http://bower.io/search/ ,或者用指令搜尋

$bower search bootstrap

使用方法:

請先安裝 express 作為網頁框架,然後安裝套件的方式,在這邊安裝一下 bootstrap

$bower install bootstrap

指令安裝之後就會看到 bootstrap 出現在 bower_components/bootstrap/*.* , bower_components/jquery/*.*

透過 bower init 指令,安裝 bower.json,您可以在 dependencies 的部分輸入套件名稱與版本號

我們在建立好的 express 框架下的 app.js ,把剛才建立好的 bower_components 資料夾,綁進去基本靜態套件的路徑

app.use(express.static(path.join(__dirname, 'bower_components/bootstrap/dist/')));

接著用引入檔案的方法,請打開 ./views/layout.jade ,在 head 的子節點的地方新增

link(rel='stylesheet', href='/css/bootstrap.min.css')
script(src='/js/bootstrap.min.js')

引入成功之後,就可以建立一個 bootstrap 的頁面,下圖是用透過 bower 匯入 bootstrap 套件建立一個簡單前端頁面:

參考資料:
http://bower.io/
http://jade-lang.com/tutorial/
http://getbootstrap.com/


上一篇
Node.js 系列學習日誌 #11 - nvm (Node Version Manager) 管理多個 Node.js 版本
下一篇
Node.js 系列學習日誌 #13 - npm 相依套件指定版本含義與自動更新 package.json
系列文
Node.js 系列學習日誌30

尚未有邦友留言

立即登入留言