NPM 套件管理 & 常用開發工具介紹Wan-Ting Jheng

2015/4/7

● 以往 javascript 只能在瀏覽器上運行

● Node.js 不是一種程式語言，也不是 javascript

● 它是 javascript 運行平台

● 使用 Google Chrome V8 JavaScript execution engine

● 下載安裝 https://nodejs.org/download/

Node.js

NPM (Node Package Manager)

● Node 模組套件管理器

● 安裝 Node.js 會連帶安裝 NPM

● NPM 建立了 Node.js 的生態圈

○ 開發者可以透過 NPM 上傳/下載 模組

● 在 NPM 官網可以查到目前有哪些模組

○ 官網 https://www.npmjs.com/

NPM 常用指令

# 安裝套件 -g 代表全域安裝，完成後可以用在指令列

npm install <package name> -g# 將套件安裝在目前目錄的專案中

npm install <package name>

# 移除全域套件

npm uninstall <package name> -g# 移除專案裡的套件

npm uninstall <package name>

# 搜尋套件

npm search <package name>

NPM 常用指令

# 列出全域套件

npm ls -g# 列出專案使用的套件

npm ls

# 更新全域套件

npm update -g# 更新專案套件

npm update

package.json

● 管理專案套件相依性以及所使用到的模組套件

● 放在專案根目錄下

● 參考 https://docs.npmjs.com/files/package.json

● npm 相關指令

# 產生 package.json，只有版本和名字是必填

npm init# 根據 package.json 內容替專案安裝相關模組套件

npm install

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" }}

Bower

● Twitter 團隊開發的前端開發套件管理工具

● 管理/安裝 前端開發所需要的 package (css/javascript)● 自動依套件相依性安裝

● 以往開發很常遇到的情境:專案使用了許多外部工具(例如 jQuery, bootstrap ...)每隔一陣子想更新到最新版本，就要分別下載更新

並且可能會有相容性問題要處理

● bower 可以解決以上問題

Bower 相關指令

# 首先要透過 npm 全域安裝 bowernpm install bower -g# 查專案安裝套件

bower install <package-name># 查詢專案目前安裝的套件

bower list# 更新套件

bower update <package-name># 搜尋套件

bower search <package-name>

Grunt

● Task Runner，任務自動化管理工具

● 簡化、自動化 繁瑣事務

○ 壓縮/編譯/單元測試/linting/部署 ...

● Gruntfile.js○ 放在專案根目錄下

○ 用來設定任務與載入Grunt外掛

○ 實際要做的自動化任務，都在這裡定義

Grunt 相關指令

# 透過 npm 安裝 clinpm install -g grunt-cli# 專案安裝 grunt 並加進 package.json的devDependenciesnpm install grunt --save-dev

# 執行 Grunt default 任務列表

grunt# 執行 套件任務列表

grunt <taskName># 執行 套件任務特定目標

grunt <taskName>:<targetName>

Gruntfile.js 範例

Gulp

● 和 grunt 一樣，也是任務自動化管理工具

● gulpfile.js○ 放在專案根目錄下

○ 以 javascript 語法撰寫任務內容

● 提供四個 function○ task○ src○ dest○ watch

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'); });

Grunt Gulp

特性 ● File based● Configuration over code● 任務為同步執行

● Stream based● Code over configuration● 任務為非同步執行

優點 ● 發展較早，因此支援的模組較多

● 跨平台

● 易學易用● 由於 stream based, 非同步執行的

特性，因此執行速度快● 跨平台

缺點 ● 需要編寫許多設定，不易上手

● file r/w 頻繁導致專案變大時效能低落

● 發展較晚，因此支援的模組較少

Grunt v.s. Gulp

Demo

● 下載以下程式

https://github.com/wantingj/gulp-demo.git

● 在指令列輸入以下指令

○ 將相關的 package 下載至專案中

npm install

○ 執行 default task，此範例有語法檢查與 js 壓縮功能

gulp

● 完成後到專案目錄下檢查會看到多了./js/all.js

Reference

DreamersLab - npm 基本指令

http://dreamerslab.com/blog/tw/npm-basic-commands/黑暗執行緒 - Gulp, Grunt, Bower以及npmhttp://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 Gulphttp://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-gulpManaging Your Build Tasks With Gulp.jshttp://code.tutsplus.com/tutorials/managing-your-build-tasks-with-gulpjs--net-36910