![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](https://image.slidesharecdn.com/npm-150409014904-conversion-gate01/85/Npm-17-320.jpg)
Npm 套件管理 & 常用開發工具介紹
- 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