前後端套件管理 npm bower grunt composer gulp

套件管理，主要管理專案用的元件，元件彼此間的相依。更近一步的，還有版本管理、升級、相容警示、劇本執行

NPM

node.js package management

移除

• sudo apt-get remove nodejs 
• sudo apt-get remove npm

安裝

隨著 nodejs 一起安裝(link)

檔案結構

package.json

• 主要設定檔，在根目錄，可由 npm init 建立

node-modules /

• 套件存放位置

常用指令

全域 -g，每個指令都可帶
說明 -h，ex.npm remove -h
版本 npm -v
建專案 npm init

• 就是產空的 package.json，欄位都非必填

全安裝 npm install

• 補裝未安裝的套件
• package.json 同層下指令，參考 dep. 兩清單，下載到 node-modules 資料夾
• 如果遇到權限問題，可使用 --unsafe-perm=true --allow-root 強制允許

安裝 npm install <package>

• 安裝舊版 <package>@<version>
• --save 順便寫入 dependencies 清單
• --save-dev，順便寫入 devDependencies 清單

移除 npm uninstall <package>
搜尋 npm search <package>
表列 npm ls
更新 npm update
資訊 npm info <package>

• 最新版本號 npm info <package> version
• local端版本號 npm list --depth 1 --global <package>

執行指令 npm run <script name> 

• 編輯 package.json

"scripts": {
    "test": "echo 'hello world'",
    "test2": "echo 'hello2"
}

$ npm run test2 #會印出 hello2

查詢 global 套件清單

• npm list -g --depth=0

package.json(link)

套件需求版本號

version #大於 version
> version #小於 version，另外還有 >=、<、<=
version1 - version2 #大於等於v1 && 小於等於v2
~1.2.3 #合理接近 1.2.3 版本， 等價 >=1.2.3-0 <1.3.0-0
~1.2 #等價 >1.2.0-0 <1.3.0-0，也就是 1.2.x 版
~1 #等價於 >1.0.0-0 <2.0.0-0 ，也就是 1.x 版
^version1 #相容 version1 的版本，ex. ^1.2.3  >=1.2.3 <2.0.0
* #任意版本
"" #沒填，等同 *
http://...
range1 || range2
git... #Git專案網址 ex.git+xxx://github.com/user/project.git
user/repo #某人的Git專案指定Commit-ish，ex.visionmedia/mocha#4727d357ea
path/path/path #本地路徑 ex.~/foo/bar

屬性欄位

• preferGlobal 為 true 時，使用者沒將此專案裝在 global，就會警告
• private 為 true 就無法發布
• publishConfig
• os 指定可以 or 不可以運作的系統 (ex. linux, !win32)
• engines 指定需求的 npm、nodes 版本
• bugs 使用者手動回報錯誤的網址(ex.https://github.com/owner/project/issues)
• files 納入專案的指定檔案清單
• 排除檔案，可撰寫 .npmignore，如同 git
• main 當前目錄的入口(主)程式，不設定則預設跑 index.js
• bin
• man 設定此專案 man說明的位置
• repository 讓使用者可以找到此專案的網址 (可以是 git, svn, npm, gist, bitbucket, gitlab...)
• scripts 下指令
• DEFAULT VALUES
• config 設定port等等... (link)
• dependencies 必要相依元件
• devDependencies 開發用相依元件(dep.的元件清單不需在這重複)
• peerDependencies 鎖定特定元件"版本"，當使用者又自行安裝該元件其他版本，就會提出版本衝突警告 
• bundledDependencies
• optionalDependencies 選擇性相依元件，安裝失敗沒差

Bower

bower = node + npm + git
涉及html, css, js和圖片等媒體資源。或許，這也是人們喜歡在服server端用npm,而在client端用bower

安裝

• npm install bower -g

常用指令

• 安裝 bower install <package>
• 查專案套件清單 bower list
• 更新 bower update <package>
• 搜尋套件 bower search <package>

Composer
PHP 專案的套件管理工具
https://latech.tw/2017/01/composer.html

=========自動化=============

Grunt
任務自動化管理工具，同步執行、跨平台，大專案 file R/W 頻繁會導致效能低落
安裝

• npm install -g grunt-cli
• npm install grunt --save-dev
• #讓專案要使用 grunt

常用指令

• 執行Grunt 預設任務列表 grunt
• 執行套件任務列表 grunt <task> 
• 執行套件任務特定目標 grunt <task>:<target>

Gulp

任務自動化管理工具，非同步執行，速度快

檔案結構

• gulpfile.js 放在專案根目錄

Functions

• task
• src
• dest
• watch

Homebrew

mac套件管理

• Error: Permission denied - /usr/local/var/homebrew/locks/autoconf.brewing
• sudo chown -R wild:admin /usr/local