Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Npm 套件管理 & 常用開發工具介紹

16,588 views

Published on

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

Published in: Technology

Npm 套件管理 & 常用開發工具介紹

  1. 1. NPM 套件管理 & 常用開發 工具介紹 Wan-Ting Jheng 2015/4/7
  2. 2. ● 以往 javascript 只能在瀏覽器上運行 ● Node.js 不是一種程式語言,也不是 javascript ● 它是 javascript 運行平台 ● 使用 Google Chrome V8 JavaScript execution engine ● 下載安裝 https://nodejs.org/download/ Node.js
  3. 3. NPM (Node Package Manager) ● Node 模組套件管理器 ● 安裝 Node.js 會連帶安裝 NPM ● NPM 建立了 Node.js 的生態圈 ○ 開發者可以透過 NPM 上傳/下載 模組 ● 在 NPM 官網可以查到目前有哪些模組 ○ 官網 https://www.npmjs.com/
  4. 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. 5. NPM 常用指令 # 列出全域套件 npm ls -g # 列出專案使用的套件 npm ls # 更新全域套件 npm update -g # 更新專案套件 npm update
  6. 6. package.json ● 管理專案套件相依性以及所使用到的模組套件 ● 放在專案根目錄下 ● 參考 https://docs.npmjs.com/files/package.json ● npm 相關指令 # 產生 package.json,只有版本和名字是必填 npm init # 根據 package.json 內容替專案安裝相關模組套件 npm install
  7. 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. 8. Bower ● Twitter 團隊開發的前端開發套件管理工具 ● 管理/安裝 前端開發所需要的 package (css/javascript) ● 自動依套件相依性安裝 ● 以往開發很常遇到的情境: 專案使用了許多外部工具(例如 jQuery, bootstrap ...) 每隔一陣子想更新到最新版本,就要分別下載更新 並且可能會有相容性問題要處理 ● bower 可以解決以上問題
  9. 9. Bower 相關指令 # 首先要透過 npm 全域安裝 bower npm install bower -g # 查專案安裝套件 bower install <package-name> # 查詢專案目前安裝的套件 bower list # 更新套件 bower update <package-name> # 搜尋套件 bower search <package-name>
  10. 10. Grunt ● Task Runner,任務自動化管理工具 ● 簡化、自動化 繁瑣事務 ○ 壓縮/編譯/單元測試/linting/部署 ... ● Gruntfile.js ○ 放在專案根目錄下 ○ 用來設定任務與載入Grunt外掛 ○ 實際要做的自動化任務,都在這裡定義
  11. 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. 12. Gruntfile.js 範例
  13. 13. Gulp ● 和 grunt 一樣,也是任務自動化管理工具 ● gulpfile.js ○ 放在專案根目錄下 ○ 以 javascript 語法撰寫任務內容 ● 提供四個 function ○ task ○ src ○ dest ○ watch
  14. 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. 15. Grunt Gulp 特性 ● File based ● Configuration over code ● 任務為同步執行 ● Stream based ● Code over configuration ● 任務為非同步執行 優點 ● 發展較早,因此支援的模組 較多 ● 跨平台 ● 易學易用 ● 由於 stream based, 非同步執行的 特性,因此執行速度快 ● 跨平台 缺點 ● 需要編寫許多設定,不易上 手 ● file r/w 頻繁導致專案變大時 效能低落 ● 發展較晚,因此支援的模組較少 Grunt v.s. Gulp
  16. 16. Demo ● 下載以下程式 https://github.com/wantingj/gulp-demo.git ● 在指令列輸入以下指令 ○ 將相關的 package 下載至專案中 npm install ○ 執行 default task,此範例有語法檢查與 js 壓縮功能 gulp ● 完成後到專案目錄下檢查會看到多了./js/all.js
  17. 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

×