Enviar búsqueda
Cargar
前端自動化工具
•
Descargar como PPTX, PDF
•
1 recomendación
•
666 vistas
國昭 張
Seguir
瞭解近期前端的自動化工具使用與概念
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 34
Descargar ahora
Recomendados
Redux+react js
Redux+react js
國昭 張
Docker實務
Docker實務
國昭 張
Docker進階探討
Docker進階探討
國昭 張
Docker基礎
Docker基礎
國昭 張
RxJS 6 新手入門
RxJS 6 新手入門
Will Huang
快速上手 Windows Containers 容器技術 (Docker Taipei)
快速上手 Windows Containers 容器技術 (Docker Taipei)
Will Huang
Windows Container 101: dotNET, Container, Kubernetes
Windows Container 101: dotNET, Container, Kubernetes
Will Huang
Entity Framework實戰
Entity Framework實戰
國昭 張
Recomendados
Redux+react js
Redux+react js
國昭 張
Docker實務
Docker實務
國昭 張
Docker進階探討
Docker進階探討
國昭 張
Docker基礎
Docker基礎
國昭 張
RxJS 6 新手入門
RxJS 6 新手入門
Will Huang
快速上手 Windows Containers 容器技術 (Docker Taipei)
快速上手 Windows Containers 容器技術 (Docker Taipei)
Will Huang
Windows Container 101: dotNET, Container, Kubernetes
Windows Container 101: dotNET, Container, Kubernetes
Will Huang
Entity Framework實戰
Entity Framework實戰
國昭 張
AKS 與開發人員體驗 (Kubernetes 大講堂)
AKS 與開發人員體驗 (Kubernetes 大講堂)
Will Huang
企業導入微服務實戰 - updated
企業導入微服務實戰 - updated
Paul Chao
Asp.net core v1.0
Asp.net core v1.0
chang kuo-chao
React js
React js
國昭 張
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
Will Huang
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
Will Huang
Vue
Vue
國昭 張
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
Will Huang
Docker應用
Docker應用
Jui An Huang (黃瑞安)
Entity framework + Linq 介紹
Entity framework + Linq 介紹
Alan Tsai
Asp.net mvc 6 新功能初探
Asp.net mvc 6 新功能初探
Gelis Wu
Docker初识
Docker初识
hubugui
Angular 开发技巧 (2018 ngChina 开发者大会)
Angular 开发技巧 (2018 ngChina 开发者大会)
Will Huang
Azure Container Service 使用 DC / OS 管理 docker 容器
Azure Container Service 使用 DC / OS 管理 docker 容器
Ch Rick
DAE 新变化介绍
DAE 新变化介绍
Tianwei Liu
廣宣學堂: 企業導入微服務實戰
廣宣學堂: 企業導入微服務實戰
Paul Chao
Openstack neutron 原理详解
Openstack neutron 原理详解
Yong Luo
NodeJS基礎教學&簡介
NodeJS基礎教學&簡介
GO LL
Asp.net 5 新功能與變革
Asp.net 5 新功能與變革
Gelis Wu
DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略
Will Huang
课题二:Node.js那些事儿
课题二:Node.js那些事儿
Liu Allen
CP 值很高的 Gulp
CP 值很高的 Gulp
Yvonne Yu
Más contenido relacionado
La actualidad más candente
AKS 與開發人員體驗 (Kubernetes 大講堂)
AKS 與開發人員體驗 (Kubernetes 大講堂)
Will Huang
企業導入微服務實戰 - updated
企業導入微服務實戰 - updated
Paul Chao
Asp.net core v1.0
Asp.net core v1.0
chang kuo-chao
React js
React js
國昭 張
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
Will Huang
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
Will Huang
Vue
Vue
國昭 張
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
Will Huang
Docker應用
Docker應用
Jui An Huang (黃瑞安)
Entity framework + Linq 介紹
Entity framework + Linq 介紹
Alan Tsai
Asp.net mvc 6 新功能初探
Asp.net mvc 6 新功能初探
Gelis Wu
Docker初识
Docker初识
hubugui
Angular 开发技巧 (2018 ngChina 开发者大会)
Angular 开发技巧 (2018 ngChina 开发者大会)
Will Huang
Azure Container Service 使用 DC / OS 管理 docker 容器
Azure Container Service 使用 DC / OS 管理 docker 容器
Ch Rick
DAE 新变化介绍
DAE 新变化介绍
Tianwei Liu
廣宣學堂: 企業導入微服務實戰
廣宣學堂: 企業導入微服務實戰
Paul Chao
Openstack neutron 原理详解
Openstack neutron 原理详解
Yong Luo
NodeJS基礎教學&簡介
NodeJS基礎教學&簡介
GO LL
Asp.net 5 新功能與變革
Asp.net 5 新功能與變革
Gelis Wu
DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略
Will Huang
La actualidad más candente
(20)
AKS 與開發人員體驗 (Kubernetes 大講堂)
AKS 與開發人員體驗 (Kubernetes 大講堂)
企業導入微服務實戰 - updated
企業導入微服務實戰 - updated
Asp.net core v1.0
Asp.net core v1.0
React js
React js
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
Vue
Vue
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
Docker應用
Docker應用
Entity framework + Linq 介紹
Entity framework + Linq 介紹
Asp.net mvc 6 新功能初探
Asp.net mvc 6 新功能初探
Docker初识
Docker初识
Angular 开发技巧 (2018 ngChina 开发者大会)
Angular 开发技巧 (2018 ngChina 开发者大会)
Azure Container Service 使用 DC / OS 管理 docker 容器
Azure Container Service 使用 DC / OS 管理 docker 容器
DAE 新变化介绍
DAE 新变化介绍
廣宣學堂: 企業導入微服務實戰
廣宣學堂: 企業導入微服務實戰
Openstack neutron 原理详解
Openstack neutron 原理详解
NodeJS基礎教學&簡介
NodeJS基礎教學&簡介
Asp.net 5 新功能與變革
Asp.net 5 新功能與變革
DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略
Similar a 前端自動化工具
课题二:Node.js那些事儿
课题二:Node.js那些事儿
Liu Allen
CP 值很高的 Gulp
CP 值很高的 Gulp
Yvonne Yu
Vic weekly learning_20160504
Vic weekly learning_20160504
LearningTech
Nodejs & NAE
Nodejs & NAE
q3boy
以Code igniter為基礎的網頁前端程式設計
以Code igniter為基礎的網頁前端程式設計
Amigo 陳兆祥
快快樂樂學 Angular 2 開發框架
快快樂樂學 Angular 2 開發框架
Will Huang
合久必分,分久必合
合久必分,分久必合
Qiangning Hong
ASP.NET MVC 6 新功能探索
ASP.NET MVC 6 新功能探索
Will Huang
從軟體開發角度 談 Docker 的應用
從軟體開發角度 談 Docker 的應用
謝 宗穎
Node分享 展烨
Node分享 展烨
tb-vertical-guide
D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版
Jackson Tian
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
taobao.com
Linux binary Exploitation - Basic knowledge
Linux binary Exploitation - Basic knowledge
Angel Boy
Node js实践
Node js实践
myzykj
OPM
OPM
goto100
Full stack-development with node js
Full stack-development with node js
Xuefeng Zhang
Angular 4 網站開發最佳實務 (Modern Web 2017)
Angular 4 網站開發最佳實務 (Modern Web 2017)
Will Huang
Introduction to NodeJS
Introduction to NodeJS
TechParty@UIC
ElasticSearch Training#2 (advanced concepts)-ESCC#1
ElasticSearch Training#2 (advanced concepts)-ESCC#1
medcl
Berserk js
Berserk js
taobao.com
Similar a 前端自動化工具
(20)
课题二:Node.js那些事儿
课题二:Node.js那些事儿
CP 值很高的 Gulp
CP 值很高的 Gulp
Vic weekly learning_20160504
Vic weekly learning_20160504
Nodejs & NAE
Nodejs & NAE
以Code igniter為基礎的網頁前端程式設計
以Code igniter為基礎的網頁前端程式設計
快快樂樂學 Angular 2 開發框架
快快樂樂學 Angular 2 開發框架
合久必分,分久必合
合久必分,分久必合
ASP.NET MVC 6 新功能探索
ASP.NET MVC 6 新功能探索
從軟體開發角度 談 Docker 的應用
從軟體開發角度 談 Docker 的應用
Node分享 展烨
Node分享 展烨
D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
Linux binary Exploitation - Basic knowledge
Linux binary Exploitation - Basic knowledge
Node js实践
Node js实践
OPM
OPM
Full stack-development with node js
Full stack-development with node js
Angular 4 網站開發最佳實務 (Modern Web 2017)
Angular 4 網站開發最佳實務 (Modern Web 2017)
Introduction to NodeJS
Introduction to NodeJS
ElasticSearch Training#2 (advanced concepts)-ESCC#1
ElasticSearch Training#2 (advanced concepts)-ESCC#1
Berserk js
Berserk js
Más de 國昭 張
8th ddd taiwan study group bounded context integration
8th ddd taiwan study group bounded context integration
國昭 張
Ddd(meetup 2) ddd with clean architecture
Ddd(meetup 2) ddd with clean architecture
國昭 張
20190126 ddd-meetup1
20190126 ddd-meetup1
國昭 張
事件風暴-設計衝刺
事件風暴-設計衝刺
國昭 張
事件風暴-領域建模
事件風暴-領域建模
國昭 張
單元測試
單元測試
國昭 張
Scrum essential
Scrum essential
國昭 張
DDD架構設計
DDD架構設計
國昭 張
DDD系統分析
DDD系統分析
國昭 張
DDD引導
DDD引導
國昭 張
前端測試
前端測試
國昭 張
Asp.net core v1.0
Asp.net core v1.0
國昭 張
架構設計-資料存取的選擇
架構設計-資料存取的選擇
國昭 張
例外處理與單元測試
例外處理與單元測試
國昭 張
ASP.Net WebAPI經驗分享
ASP.Net WebAPI經驗分享
國昭 張
ASP.Net MVC Framework
ASP.Net MVC Framework
國昭 張
Team Foundation Server
Team Foundation Server
國昭 張
SQL Server效能調校
SQL Server效能調校
國昭 張
NoSQL-MongoDB介紹
NoSQL-MongoDB介紹
國昭 張
深入淺出Node.JS
深入淺出Node.JS
國昭 張
Más de 國昭 張
(20)
8th ddd taiwan study group bounded context integration
8th ddd taiwan study group bounded context integration
Ddd(meetup 2) ddd with clean architecture
Ddd(meetup 2) ddd with clean architecture
20190126 ddd-meetup1
20190126 ddd-meetup1
事件風暴-設計衝刺
事件風暴-設計衝刺
事件風暴-領域建模
事件風暴-領域建模
單元測試
單元測試
Scrum essential
Scrum essential
DDD架構設計
DDD架構設計
DDD系統分析
DDD系統分析
DDD引導
DDD引導
前端測試
前端測試
Asp.net core v1.0
Asp.net core v1.0
架構設計-資料存取的選擇
架構設計-資料存取的選擇
例外處理與單元測試
例外處理與單元測試
ASP.Net WebAPI經驗分享
ASP.Net WebAPI經驗分享
ASP.Net MVC Framework
ASP.Net MVC Framework
Team Foundation Server
Team Foundation Server
SQL Server效能調校
SQL Server效能調校
NoSQL-MongoDB介紹
NoSQL-MongoDB介紹
深入淺出Node.JS
深入淺出Node.JS
前端自動化工具
1.
前端自動化工具
2.
大綱 • Node.Js • 套件安裝工具:
NPM & Bower • Gulp • WebPack
3.
Node.Js • Node.js本身就是伺服器端的JavaScript引擎! • 主要特性: •
採用Chrome的JavaScript runtime(V8) • 可快速開發高延展性的Web Application • 其開發皆採用Event-Driven 且 non-blocking I/O • 高度社群支援,現將推出與IO.js合併的分支版本v4 • 跨平台 • 採用CommonJs標準
4.
NPM(Node.js Package Manager) •
NPM本身是一個公開的套件資料庫(npm public registry) • 主要是用來共享node.js的程式碼 • 主要以套件(Package)或模組(Module)做封裝 • NPM是一套Node.js的套件管理工具 • 用來搜尋、安裝、更新、移除、發行NPM套件的工具 • 管理套件與套件之間的相依性
5.
Node.js的套件很多
6.
Node.js套件的定義 • 套件的組成: • 一個資料夾(Folder) •
資料夾中有個package.json檔案 • 用來定義套件的名稱、版本與相關資訊 • 用來定義套件中還有使用到那些其它相依的套件 • 資料夾中有一堆自訂的檔案與其它資料夾 • 專案的組成(也是一個資料夾) • 透過NPM安裝的套件 • 你自己寫好的程式碼與其它檔案 • 專案本身也可以變成套件 • 可發佈到NPM Public Registry變成公開的套件
7.
NPM常用指令 • 搜尋套件 • npm
search [package_namegit url] • 安裝套件 • 局域: npm install [package_name1] [package_name2] .. • 全域: npm install –g [package_name1] [package_name2] .. • 安裝全域的套件會在指定的目錄底下: • Windows: %APPDATA%npmnode_modules • OS X: /usr/local/lib/node_modules • 查詢NPM套件儲存位置: npm config get prefix • 自動安裝package.json中所定義的所有套件: • npm install • 紀錄套件到package.json • npm install [package_name] –save • npm install [package_name] –save-dev
8.
Package.json檔案 • 為一純json格式的檔案(註: 它不是js檔案) •
必要欄位: name 和 version { name : “Arthur”, version : “1.0.0”, description : “”, main : “index.js”, author: “Arthur email@add.ress (https://xxx.xxx)” } • 可以使用npm init或npm init –y快速初始化package.json檔 • Package.json不能使用UTF-8 with BOM編碼儲存
9.
套件符號表示法 • ^ :
相容於特定版本 • 1.2.x : 直接指定相容的1.2.X版本 • ~ : 大概等於指定版本 • > : 永遠取得最新版本 • >= : 大於等於特定版本 • <= : 小於等於特定版本
10.
Bower • 也是一個套件管理工具 -
針對前端套件 • NPM使用package.json紀錄套件資訊;Bower採用bower.json • Bower本身也是使用Node.js所寫成的,所以需要使用NPM進行全域 安裝: • npm install –g bower • Bower本身支援採用git url方式去下載套件,所以在使用bower指令 前,需要先安裝好git並且將git加入環境變數中(env_var)
11.
Bower基本操作 • 安裝套件 • bower
install [package_name git url] 安裝最新版本 • bower install [package_name]#1.11.3 安裝特定版本 • bower info [package_name] 查詢所有可安裝版本 • 更新套件 • bower update • 建立bower.json檔案 • bower init
12.
可以使用.bowerrc微調Bower設定 • 可手動在專案資料夾中建立.bowerrc檔案 • 常用的屬性設定: •
Diretory : 指定bower套件預設安裝路徑 • cwd : bower工具執行時的工作目錄路徑 • Registry : 指定bower線上資料庫(Registry)位址(Url) • Timeout : 指定bower執行時的timeout時間(預設為60000ms)
13.
Bower與NPM的差別 • NPM • Node.js套件管理工具 •
每個套件會自我管理與其它套件之間的相依性 • 自我管理套件相依性會以樹狀結構各自展開 • 由於各自套件會自動安裝各自的相依性套件,因此很占空間 • Node.js(伺服器端Js)沒有Js檔案太大的問題 • Bower • 前端套件管理工具 • 每個套件會自我管理與其它套件之間的相依性 • 自我管理套件相依性會以扁平結構各自展開
14.
Gulp • 用於改善前端工作流程,將工作自動化的工具 • 主要特性 •
易於使用 - 以程式碼取代組態檔案 • 效能佳 – 採用Node.js中的stream機制和Pipeline流程 • 高品質 – 每個Registry中的套件都經過嚴格審查 • 易學 – 只懂一點點Node.js就可以
15.
Gulp到底是有多簡單? • 四個API: • 定義工作(task) •
gulp.task(name[, deps], fn) • 定義檔案讀取來源(src) • gulp.src(globs[ , options]) • 定義檔案寫入的目的地(dest) • gulp.dest(path[ , options]) • 即時監視檔案變更(watch) • gulp.watch(glob [, opts], tasks) • gulp.watch(glob [, opts, callbackFn])
16.
實務的例子
17.
建置任務 • gulp.task(name,[,deps], callback) •
例1: gulp.task(‘uglifyScript’,function(){ //處理Js}); • 例2: gulp.task(‘build’,[‘uglifyScript’],function(){//處理編譯}); • 任務之間可以設置相依性。 • Gulp在底層仍是使用node.js在處理檔案方面的非同步API;因此,當 任務之間有相依性時,很有可能因為非同步處理的是相同的檔案而 造成錯誤。(註: 有時成功有時失敗)
18.
讀取檔案 • gulp.src(globs,[,opt]); • glob是node.js所使用一種檔案路徑表示法,其功用主要是在以一個 字串同時描述多個檔案的檔案路徑。 •
例: ‘’assets/js/**/*.js“ => assets/js/底下所有副檔名為js的檔案 • 例: !‘’assets/js/**/*.ts“ => 排除assets/js/底下所有副檔名為ts的檔案 • 例: [‘’assets/js/**/*.js“ , !‘’assets/js/vendor/**/*.js“ ] => 取得assets/js/底下 所有的js檔案,但是請排除assets/js/vendor/中的 • gulp.src會將讀取的所有檔案以串流(Stream)的方式處理,可以在其 後以pipe方法接續這些檔案串流的處理: • gulp.src( ’assets/js/**/*.js“ ,function(){//do}) .pipe(gulp.dest(‘~路徑~’));
19.
寫入檔案 • gulp.dest(path,[,opt]); • 通常是在所有的處理都結束之後才會呼叫到這個方法將成果寫入 成為檔案。 •
Gulp.dest的第一個參數並非是使用globs,而是資料夾相對路徑。 • 例: gulp.src(’assets/js/**/*.ts“) .pipe(typescript()) .pipe(gulp.dest(‘./build/js’)) .pipe(uglify()) .pipe(gulp.dest(‘./CdnContent/js’));
20.
監控檔案 • gulp.watch(globs,[,dep],function(){ //do
something}); • 當監控的檔案在變更且儲存檔案後,就會觸發。 • 通常用在撰寫高階的Js/Html/Css語言,例如: TypeScript/Jade/SCSS時, 會很需要用到這個功能,而一般前端CI流程倒不一定非用到不可。
21.
實務範例 • 以npm安裝所需要的模組 • 創建一個gulpfile.js(名字要對) •
在gulpfile.js開頭宣告並引入所有需要的模組 • 註冊所需要的任務
22.
Gulp的錯誤處理 • Gulp天生是非同步I/O串流的 檔案操作模式,但不同步驟的 處理是啟用不同的串流 • Stream-combiner套件可將多 個步驟強制使用同一個串流, 如此一來僅需要傾聽一個錯誤 訊息事件。
23.
Gulp V.S. Grunt Grunt
Gulp 特性 • File-based • Configuration over code • 檔案處理都是呼叫Node.js的同步API • 串流-based • Code over configuration • 檔案處理都是呼叫Node.js的非同步API 優點 • 發展較早,因此支援的模組較多 • 跨平台 • 易學易用(CP值高) • 速度較快 • 跨平台 缺點 • 需要編寫較多的設定,入門不易 • File Read/Write頻繁導致檔案數變大 時,會造成效能低落 • 要留意非同步API的弊病
24.
WebPack • 管理模組相依性的工具 • 其模組包含:
html/js/coffe/css/less/png/web fonts…. • 透過產生靜態檔案來代表這些相依的模組
25.
先別管WebPack了,你聽過CommonJs和AMD 嗎? • CommonJS • 大多用在Node.js環境 •
採用”同步”的方式載入相依模組 • 可設定module.exports的值來決定對外公開的物件 • 可設定exports變數的屬性值來決定對外公開的物件 • AMD(Asynchronous Module Definition) • 大多用在瀏覽器環境 • 採用”非同步”的方式載入相依模組 • 備註: • AMD是一份API規格 • 而RequireJS是實作AMD出來的一個函式庫
26.
CommonJs範例
27.
AMD範例
28.
遺憾…. • 無論CommonJs再怎麼完美,但是瀏覽器就是不支援! • 如果有一個工具能讓我們自由混搭CommonJs和AMD寫法呢?
29.
再回來WebPack一下 • 在前端開發時,最討厭的就是: • 要小心Js的載入順序 •
不要注意不要讓Browser開太多連線來要求資源 • 資源擺在前還是後都有講究 • 要做到Load on Demand很麻煩 • WebPacka是怎麼解決上述問題: • 把所有資源都包裝成模組 • 在Js中決定什麼時候載入那些模組
30.
WebPack的四個元素 Bundle PlugIn Loader Code Splitting
31.
Bundle • 過去的問題 • 一次性載入所有需要的資源
– 太耗頻寬 • 個別載入資源 - 開太多Http連線 • WebPack你怎麼做? • 把資源分組成為多個區塊(Chunk)
32.
Loader • 原本的前端世界 • Js
/ Css / Html • 現在的前端世界 • Sass / Scss / Less / coffeScript / typescript / jade ….. • 一堆自動化工具(Gulp / Grunt)幫你回到原本的前端世界 • WebPack你能做什麼? • Gulp / Grunt用程式,WebPack用組態設定Loader運作順序 • Loader可以使用?代入參數
33.
PlugIn • WebPack可以使用PlugIn提供編譯的額外處理 • 當WebPack編譯的過程中,可以藉由PlugIn注入額外的處理功能
34.
Code Splitting • CommonJs方式: •
require.ensure([“a”], function(require) { var a = require(“a”) }); • 等待a模組載入之後,才會呼叫CallBack方法(a模組只是載入還沒引入) • AMD方式: • require([“a”, “b”], function(a, b){ // … });
Descargar ahora