[精讚] [會員登入]
1743

安裝網頁套件管理程式 Bower

一個非常棒的Javascript套件管理程式bower,用完愛不釋手。

分享此文連結 //n.sfs.tw/10314

分享連結 安裝網頁套件管理程式 Bower@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-10-25 07:16:03 最後編修
2016-11-28 10:41:02 By 張○○
 

自動目錄

Bower[1]是我這近才知道的東西,因為我要安裝jquery時,他提供了一個bower的安裝方式,疑?這是什麼。所以我心不甘情不願的試試了。

Bower的logo是一隻彩色鳥,但是為什麼叫bower?我查bower的字義是臥室、樹蔭、村舍、船首錨,好的,沒有鳥。原來這字來自 bowerbird,官網有提到,這是twitter在2012年的teamwork,主要整合js、css fw等物件

我真的太久沒學習新的東西了,這是2012年就釋出的東西,好的,悲嘆3秒就夠了,懶惰學習是天性啊。

OS

CentOS release 6.5 (Final)

一、前言

要安裝Bower首先要有 npm,所以我快樂的使用npm要安裝Bower時,發現
# npm install -g bower
-bash: npm:命令找不到

接下來我想說用yum來裝應該就可以,但是失敗:
 yum -y install npm
...
No package npm available.
Error: Nothing to do

正常情況下這步我就會放棄用最爛的方法解決:睡覺去,可是今天我沒有。

參考[3]的解法,只要用下面的指令就能安裝:
yum -y install npm --enablerepo=epel

Error getting repository data for epel, repository not found

我又得到一個no epel的錯誤

二、先加入epel的repos.

EPEL(Extra Packages for Enterprise Linux)主要目的是提供各種企業級的 Linux 一些額外的高品質套件[2],依他的方法安裝:
# wget http://mirror01.idc.hinet.net/EPEL/6/i386/epel-release-6-8.noarch.rpm
# rpm -ivh epel-release-6-8.noarch.rpm

三、yum 安裝 npm

接下來就簡單了

# yum -y install npm --enablerepo=epel

四、用npm安裝Bower

# npm install -g bower

安裝完後,在/usr/bin/bower會有執行檔
# whereis bower
bower: /usr/bin/bower

五、用bower安裝jquery

用bower安裝jquery的好處就是,可以追踨版號和更新,詳細的使用可以參考[4][5]的說明,很詳細。

1. 建立bower設定檔 .bowerrc,假設javascript/jquery的套件都要裝在  js 這個目錄中

$ cd /path/to/web/js
$ touch .bowerrc
$ vi .bowerrc
{
    "directory" : "."
}

2. 安裝jquery

$ bower install jquery

bower cached        git://github.com/jquery/jquery.git#2.1.4
bower validate      2.1.4 against git://github.com/jquery/jquery.git#*
bower install       jquery#2.1.4

安裝完成後,就會在js的目錄下多出jqeury 目錄
├── js
│   └── jquery

六、bower 的操作筆記

1. 安裝
切到該目錄下
$ bower install package-name

安裝完會出現一個bower_components/ 的目錄,安裝後套件會放在裡面。

2. 使用root的權限安裝要加上 --allow-root 參數,否則會出現類似的錯誤:

bower ESUDO         Cannot be run with sudo

Additional error details:
Since bower is a user command, there is no need to execute it with superuser permissions.
If you're having permission errors when using bower without sudo, please spend a few minutes lear                   ning more about how your system should work and make any necessary repairs.

http://www.joyent.com/blog/installing-node-and-npm
https://gist.github.com/isaacs/579814

You can however run a command with sudo using --allow-root option

解決方法,加入-allow-root 參數,例:
#  bower  --allow-root install jquery

3. 要指定放置目錄,可以設定目錄路徑[5]

使用者家目錄 $HOME/.bowerrc 為全域設定。
專案根目錄 project/.bowerrc 為該專案本身的設定。

每個一個目都可以放置一個.bowerrc,建議為每個一目錄建立一個獨立的bowerrc,優點是獨立管理,例如我的web/目錄長這樣:
.
├── js
│   ├── .bowerrc
│   └── jquery
└── third
    ├── .bowerrc
    ├── pure-min.css
    └── pure-release-0.6.0

4. 移除套件

  切到胲目錄下
  $ bower uninstall package-name

  或刪掉套件的那個目錄

5. 更新套件

  切到胲目錄下
  $ bower update package-name

  或更新全部
  $ bower update

6.查看已安裝套件

  $ bower list

7. 尋找套件

  $ bower search jquery

錯誤排除

npm ERR! Error: SSL Error: CERT_UNTRUSTED

SSL沒有設定信任的憑證位置。可用兩種方法解決,一是略過,二是設定[6]

# npm config set strict-ssl false


# npm config set registry="http://registry.npmjs.org/"

結論

感覺bower還滿親善的,不會像composer一樣有點...巨大,用一用就會愛不釋手。

參考資料

[1] bower 官網 http://bower.io/
[2] EPEL http://blogger.gtwang.org/2013/10/redhat-linux-enable-epel-repo.html
[3] 大后端 http://www.dahouduan.com/2014/12/25/centos-yum-install-nodejs-npm/
[4] 小惡魔 Bower 管理網站套件的好工具
[5] EDEN TSAI Bower 前端套件管理工具
[6] http://stackoverflow.com/questions/21855035/ssl-error-cert-untrusted-while-using-npm-command

 

END

你可能感興趣的文章

[Oracle9] 查看磁碟檔案類型、掛載和uuid linux 如何查看掛載的磁碟類型?此文做個整理。

Centos7 安裝 docker-composer 及使用 docker compose 是使用docker的利器,可以讓很多的指令用文檔的方式載入。

[Centos8] 利用nmcli 設定ipv6 位址 Centos7之後修改網路設定變得比較麻煩一點,此篇介紹使用nmcli指令的方法

[Centos7] 新的防火牆firewalld Centos7新的防火牆firewalld 和前面的iptables有很大的不同

[Centos7] 使用網路安裝 Centos7 使用網路來安裝Centos7,雖然這不是什麼新鮮事,但可以省你的磁碟空間或光碟片

PHP for sphinx 函式庫安裝 PECL/sphinx PHP>= 5.2.2 已經能原生支援 sphinx,可是預設的沒有裝,我們得自己裝才能用

我有話要說

>>

限制:留言最高字數1000字。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

使用Google尋找你的手機 這近發現google竟然可以用來找android的手機,而且不需要經過什麼設定或安裝軟體。

[Freebsd] 使用 ADSL 撥接上網 Freebsd上要使用 ADSL 撥接上網,該如何設定?

世紀帝國征服者新版本--被遺忘的帝國 世紀帝國征服者新版本--被遺忘的帝國 世紀二代的征服者是精典遊戲中的精典,aofe更好玩...

APACHE的記錄檔格式 LogFormat 語法 在APACHE中有定義一些記錄的語法模版 在 /etc/httpd/conf/httpd.conf 中: LogForm

[CodeIgniter 3] 資料庫的使用方法整理1/2 --Select的使用 [CodeIgniter 3] 資料庫的使用方法整理:Select的使用