Npm 套件管理 & 常用開發工具介紹 (npm,bower,grunt,gulp)

1. NPM 套件管理 & 常用開發
工具介紹
Wan-Ting Jheng
2015/4/7

2. ● 以往 javascript 只能在瀏覽器上運行
● Node.js 不是一種程式語言，也不是 javascript
● 它是 javascript 運行平台
● 使用 Google Chrome V8 JavaScript execution engine
● 下載安裝 https://nodejs.org/download/
Node.js

3. NPM (Node Package Manager)
● Node 模組套件管理器
● 安裝 Node.js 會連帶安裝 NPM
● NPM 建立了 Node.js 的生態圈
○ 開發者可以透過 NPM 上傳/下載 模組
● 在 NPM 官網可以查到目前有哪些模組
○ 官網 https://www.npmjs.com/

4. NPM 常用指令
# 安裝套件 -g 代表全域安裝，完成後可以用在指令列
npm install <package name> -g
# 將套件安裝在目前目錄的專案中
npm install <package name>
# 移除全域套件
npm uninstall <package name> -g
# 移除專案裡的套件
npm uninstall <package name>
# 搜尋套件
npm search <package name>

5. NPM 常用指令
# 列出全域套件
npm ls -g
# 列出專案使用的套件
npm ls
# 更新全域套件
npm update -g
# 更新專案套件
npm update

6. package.json
● 管理專案套件相依性以及所使用到的模組套件
● 放在專案根目錄下
● 參考 https://docs.npmjs.com/files/package.json
● npm 相關指令
# 產生 package.json，只有版本和名字是必填
npm init
# 根據 package.json 內容替專案安裝相關模組套件
npm install

7. package.json 範例
{
"name": "projName",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": { //套件相依
},
"devDependencies": { //開發套件相依
"gulp": "^3.8.11"
}
}

8. Bower
● Twitter 團隊開發的前端開發套件管理工具
● 管理/安裝 前端開發所需要的 package (css/javascript)
● 自動依套件相依性安裝
● 以往開發很常遇到的情境:
專案使用了許多外部工具(例如 jQuery, bootstrap ...)
每隔一陣子想更新到最新版本，就要分別下載更新
並且可能會有相容性問題要處理
● bower 可以解決以上問題

9. Bower 相關指令
# 首先要透過 npm 全域安裝 bower
npm install bower -g
# 查專案安裝套件
bower install <package-name>
# 查詢專案目前安裝的套件
bower list
# 更新套件
bower update <package-name>
# 搜尋套件
bower search <package-name>

10. Grunt
● Task Runner，任務自動化管理工具
● 簡化、自動化 繁瑣事務
○ 壓縮/編譯/單元測試/linting/部署 ...
● Gruntfile.js
○ 放在專案根目錄下
○ 用來設定任務與載入Grunt外掛
○ 實際要做的自動化任務，都在這裡定義

11. Grunt 相關指令
# 透過 npm 安裝 cli
npm install -g grunt-cli
# 專案安裝 grunt 並加進 package.json的devDependencies
npm install grunt --save-dev
# 執行 Grunt default 任務列表
grunt
# 執行 套件任務列表
grunt <taskName>
# 執行 套件任務特定目標
grunt <taskName>:<targetName>

12. Gruntfile.js 範例

13. Gulp
● 和 grunt 一樣，也是任務自動化管理工具
● gulpfile.js
○ 放在專案根目錄下
○ 以 javascript 語法撰寫任務內容
● 提供四個 function
○ task
○ src
○ dest
○ watch

14. gulpfile.js 範例
var gulp= require('gulp'),
gutil = require('gulp-util'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat');
gulp.task('js', function () {
gulp.src('./js/*.js')
.pipe(uglify())
.pipe(concat('all.js'))
.pipe(gulp.dest('./js'));
});
gulp.task('default', function(){
gulp.run('js');
});

15. Grunt Gulp
特性 ● File based
● Configuration over code
● 任務為同步執行
● Stream based
● Code over configuration
● 任務為非同步執行
優點 ● 發展較早，因此支援的模組
較多
● 跨平台
● 易學易用
● 由於 stream based, 非同步執行的
特性，因此執行速度快
● 跨平台
缺點 ● 需要編寫許多設定，不易上
手
● file r/w 頻繁導致專案變大時
效能低落
● 發展較晚，因此支援的模組較少
Grunt v.s. Gulp

16. Demo
● 下載以下程式
https://github.com/wantingj/gulp-demo.git
● 在指令列輸入以下指令
○ 將相關的 package 下載至專案中
npm install
○ 執行 default task，此範例有語法檢查與 js 壓縮功能
gulp
● 完成後到專案目錄下檢查會看到多了./js/all.js

17. Reference
DreamersLab - npm 基本指令
http://dreamerslab.com/blog/tw/npm-basic-commands/
黑暗執行緒 - Gulp, Grunt, Bower以及npm
http://blog.darkthread.net/post-2014-09-25-gulp-grunt-bower-npm.aspx
[Javascript] bower javascript套件管理工具 初探
http://iambigd.blogspot.tw/2014/06/javascript-bower-javascript.html
小惡魔 - 2013 Javascript Conference: 你不可不知的前端開發工具
http://blog.wu-boy.com/2013/05/2013-javascript-conference-front-tool-grunt-js/
Grunt 快速入門
http://www.gruntjs.net/docs/getting-started/
小惡魔 - The streaming build system Gulp
http://blog.wu-boy.com/2013/12/streaming-build-system-gulp/
小惡魔 - Automating your workflow with Gulp.js 投影片
http://www.slideshare.net/appleboy/automating-your-workflow-with-gulp
Managing Your Build Tasks With Gulp.js
http://code.tutsplus.com/tutorials/managing-your-build-tasks-with-gulpjs--net-36910