Suche senden
Hochladen
Gulp.js 自動化前端任務流程
•
86 gefällt mir
•
10,857 views
洧杰 廖
Folgen
Gulp.js 自動化前端任務流程
Weniger lesen
Mehr lesen
Internet
Melden
Teilen
Melden
Teilen
1 von 48
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
The Outer Planets
The Outer Planets
dwinter1
Earths water
Earths water
Dee Bayn
History and formation of the Earth (Presentation #2 Bilogy L2 project)
History and formation of the Earth (Presentation #2 Bilogy L2 project)
Sebasttian98
Module 1 origin and systems of earth
Module 1 origin and systems of earth
brionesako
Ch.12.finding the age of the earth
Ch.12.finding the age of the earth
Reem Bakr
ocean tide ppt pragati.pptx
ocean tide ppt pragati.pptx
PragatiInwati
Earth History
Earth History
Junhel Dalanon
Space Debris Project
Space Debris Project
Lucas Mancinelli
Empfohlen
The Outer Planets
The Outer Planets
dwinter1
Earths water
Earths water
Dee Bayn
History and formation of the Earth (Presentation #2 Bilogy L2 project)
History and formation of the Earth (Presentation #2 Bilogy L2 project)
Sebasttian98
Module 1 origin and systems of earth
Module 1 origin and systems of earth
brionesako
Ch.12.finding the age of the earth
Ch.12.finding the age of the earth
Reem Bakr
ocean tide ppt pragati.pptx
ocean tide ppt pragati.pptx
PragatiInwati
Earth History
Earth History
Junhel Dalanon
Space Debris Project
Space Debris Project
Lucas Mancinelli
Stars & Gallaxies
Stars & Gallaxies
guestac0099
Earth earth-system
Earth earth-system
Sofia Castillo
(5 12 09) How Earthquakes Work
(5 12 09) How Earthquakes Work
chairesj
Theories Of The Universe
Theories Of The Universe
Greg
Batis adelyn & gubalane debby ann
Batis adelyn & gubalane debby ann
Judilyn Calo
What is Geology?
What is Geology?
kimberella
Introduction to Earth Science
Introduction to Earth Science
Greg Scrivin
THEORIES OF EARTH’S FORMATION.pptx
THEORIES OF EARTH’S FORMATION.pptx
levi0417
Formation of the Solar System
Formation of the Solar System
dwinter1
Tides (Geology)
Tides (Geology)
salman khan
Le Grand Récit - du Big Bang à nos jours
Le Grand Récit - du Big Bang à nos jours
SbastienCarassou
Venus
Venus
e-twinning
Geology 101
Geology 101
graniteiii
Life On Earth
Life On Earth
Jmason1
Tiểu luận Phép biện chứng duy tâm Hêghen
Tiểu luận Phép biện chứng duy tâm Hêghen
Dịch vụ Làm Luận Văn 0936885877
comets
comets
Makati Science High School
W.E.D. Review
W.E.D. Review
Jeremy Mularella
The big bang theory
The big bang theory
TDubell
Earth dynamic system
Earth dynamic system
KruIndy SuperSci
Universe Theory Presentation
Universe Theory Presentation
Babubij
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
leneli
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Frank Cheung
Weitere ähnliche Inhalte
Was ist angesagt?
Stars & Gallaxies
Stars & Gallaxies
guestac0099
Earth earth-system
Earth earth-system
Sofia Castillo
(5 12 09) How Earthquakes Work
(5 12 09) How Earthquakes Work
chairesj
Theories Of The Universe
Theories Of The Universe
Greg
Batis adelyn & gubalane debby ann
Batis adelyn & gubalane debby ann
Judilyn Calo
What is Geology?
What is Geology?
kimberella
Introduction to Earth Science
Introduction to Earth Science
Greg Scrivin
THEORIES OF EARTH’S FORMATION.pptx
THEORIES OF EARTH’S FORMATION.pptx
levi0417
Formation of the Solar System
Formation of the Solar System
dwinter1
Tides (Geology)
Tides (Geology)
salman khan
Le Grand Récit - du Big Bang à nos jours
Le Grand Récit - du Big Bang à nos jours
SbastienCarassou
Venus
Venus
e-twinning
Geology 101
Geology 101
graniteiii
Life On Earth
Life On Earth
Jmason1
Tiểu luận Phép biện chứng duy tâm Hêghen
Tiểu luận Phép biện chứng duy tâm Hêghen
Dịch vụ Làm Luận Văn 0936885877
comets
comets
Makati Science High School
W.E.D. Review
W.E.D. Review
Jeremy Mularella
The big bang theory
The big bang theory
TDubell
Earth dynamic system
Earth dynamic system
KruIndy SuperSci
Universe Theory Presentation
Universe Theory Presentation
Babubij
Was ist angesagt?
(20)
Stars & Gallaxies
Stars & Gallaxies
Earth earth-system
Earth earth-system
(5 12 09) How Earthquakes Work
(5 12 09) How Earthquakes Work
Theories Of The Universe
Theories Of The Universe
Batis adelyn & gubalane debby ann
Batis adelyn & gubalane debby ann
What is Geology?
What is Geology?
Introduction to Earth Science
Introduction to Earth Science
THEORIES OF EARTH’S FORMATION.pptx
THEORIES OF EARTH’S FORMATION.pptx
Formation of the Solar System
Formation of the Solar System
Tides (Geology)
Tides (Geology)
Le Grand Récit - du Big Bang à nos jours
Le Grand Récit - du Big Bang à nos jours
Venus
Venus
Geology 101
Geology 101
Life On Earth
Life On Earth
Tiểu luận Phép biện chứng duy tâm Hêghen
Tiểu luận Phép biện chứng duy tâm Hêghen
comets
comets
W.E.D. Review
W.E.D. Review
The big bang theory
The big bang theory
Earth dynamic system
Earth dynamic system
Universe Theory Presentation
Universe Theory Presentation
Ähnlich wie Gulp.js 自動化前端任務流程
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
leneli
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Frank Cheung
淺談 Groovy 與 Gradle
淺談 Groovy 與 Gradle
Justin Lin
Kissy design
Kissy design
yiming he
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
【第一季第四期】JavaScript Optimization
【第一季第四期】JavaScript Optimization
tbosstraining
Mvc
Mvc
tbmallf2e
如何在有限資源下實現十年的後端服務演進
如何在有限資源下實現十年的後端服務演進
Mu Chun Wang
使用NodeJS构建静态资源管理系统
使用NodeJS构建静态资源管理系统
Frank Xu
Using google appengine_1027
Using google appengine_1027
Wei Sun
Dive into kissy
Dive into kissy
jay li
一拍一产品背后的故事(React实战)
一拍一产品背后的故事(React实战)
Kejun Zhang
Responsive Web UI Design
Responsive Web UI Design
jay li
2012 java two-desktop-appliction-using-j-ruby-with-swt
2012 java two-desktop-appliction-using-j-ruby-with-swt
tka
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
taobao.com
Using google appengine (2)
Using google appengine (2)
Wei Sun
Javascript autoload
Javascript autoload
jay li
Kissy模块化实践
Kissy模块化实践
yiming he
D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版
Jackson Tian
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
Mu Chun Wang
Ähnlich wie Gulp.js 自動化前端任務流程
(20)
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
淺談 Groovy 與 Gradle
淺談 Groovy 與 Gradle
Kissy design
Kissy design
浅析浏览器解析和渲染
浅析浏览器解析和渲染
【第一季第四期】JavaScript Optimization
【第一季第四期】JavaScript Optimization
Mvc
Mvc
如何在有限資源下實現十年的後端服務演進
如何在有限資源下實現十年的後端服務演進
使用NodeJS构建静态资源管理系统
使用NodeJS构建静态资源管理系统
Using google appengine_1027
Using google appengine_1027
Dive into kissy
Dive into kissy
一拍一产品背后的故事(React实战)
一拍一产品背后的故事(React实战)
Responsive Web UI Design
Responsive Web UI Design
2012 java two-desktop-appliction-using-j-ruby-with-swt
2012 java two-desktop-appliction-using-j-ruby-with-swt
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
Using google appengine (2)
Using google appengine (2)
Javascript autoload
Javascript autoload
Kissy模块化实践
Kissy模块化实践
D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
Mehr von 洧杰 廖
一拳前端考題
一拳前端考題
洧杰 廖
Sass&rwd前端版型架構規劃
Sass&rwd前端版型架構規劃
洧杰 廖
自從學會Sass / Compass後,考試都考100分!
自從學會Sass / Compass後,考試都考100分!
洧杰 廖
Vertical rhythm
Vertical rhythm
洧杰 廖
前端開發流程分享
前端開發流程分享
洧杰 廖
那些年,我們曾經做過的wireframe、mockup、prototype
那些年,我們曾經做過的wireframe、mockup、prototype
洧杰 廖
Sass-Front-End Developers Taiwan Party - 5
Sass-Front-End Developers Taiwan Party - 5
洧杰 廖
高雄前端社群 #6 絕對教會你jQuery動畫效果
高雄前端社群 #6 絕對教會你jQuery動畫效果
洧杰 廖
高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop
洧杰 廖
高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop
洧杰 廖
現代化網頁基礎排版技術
現代化網頁基礎排版技術
洧杰 廖
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
洧杰 廖
Mehr von 洧杰 廖
(12)
一拳前端考題
一拳前端考題
Sass&rwd前端版型架構規劃
Sass&rwd前端版型架構規劃
自從學會Sass / Compass後,考試都考100分!
自從學會Sass / Compass後,考試都考100分!
Vertical rhythm
Vertical rhythm
前端開發流程分享
前端開發流程分享
那些年,我們曾經做過的wireframe、mockup、prototype
那些年,我們曾經做過的wireframe、mockup、prototype
Sass-Front-End Developers Taiwan Party - 5
Sass-Front-End Developers Taiwan Party - 5
高雄前端社群 #6 絕對教會你jQuery動畫效果
高雄前端社群 #6 絕對教會你jQuery動畫效果
高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop
現代化網頁基礎排版技術
現代化網頁基礎排版技術
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
Gulp.js 自動化前端任務流程
1.
Gulp.js + Sublime
plugin ⾃自動化前端任務流程 講者:廖洧杰
2.
About Me • 前端⼯工程師 •
Desktop / Mobile 前端開發 • ⾼高雄前端發起⼈人 (2013/3) • ⺫⽬目前投⼊入Node.js、MongoDB
3.
進⼊入主題
4.
什麼是⾃自動化?
5.
節省⼈人⼯工時間 讓機器⾃自動處理任務
6.
為什麼前端要導⼊入 ⾃自動化?
7.
CSS Sprite 舉個例⼦子
8.
CSS Sprites ! .logo{ width:46px; height:46px; background: url(all.png)
0 0; } http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
9.
⼈人⽣生第⼀一個CSS sprite 1. 設計這張CSS
Sprites花了我四個⼩小時 2. 圖⽚片時常需要開啟PS進⾏行編輯,必須精準定位 3. ⾃自訂class名稱 4. 時常位移沒算準,顯⽰示出額外的圖⽰示 5. 有新圖⽰示時,新增⼀一個⾄至少要10分鐘以上
10.
後來改⽤用線上服務 http://goo.gl/J2nizo
11.
直到遇上 Sass、Compass
12.
@import "compass/utilities/sprites"; @import "my-icons/*.png"; @include
all-my-icons-sprites; ! .my-icons-delete, .my-icons-edit, { background: url('/images/my-icons- s34fe0604ab.png') no-repeat; } ! .my-icons-delete { background-position: 0 0; } .my-icons-edit { background-position: 0 -32px; } -64px; } 將圖⽚片丟進資料夾, ⾃自動幫你合併圖⽚片、命名Class
13.
要將前端開發盡量整合 在同條線上⾮非常困難
14.
https://github.com/JacksonTian/fks
15.
Gulp 使⽤用javascript撰寫任務排程
16.
將前後端任務有條理地 交給Gulp去運⾏行
17.
前端開發流程 • 後端環境建置(Node.js、Ruby、PHP) • 前端程式語⾔言(Jade、Coffee、Sass) •
Framework選擇(Angular、Bootstrap、jQuery) • 程式優化⽅方案(測試、編譯、壓縮)
18.
安裝Gulp • 安裝Node.js • 安裝Gulp
npm install gulp -g
19.
Gulp必備檔案 • package.json:整理gulp plugin •
gulpfile.js:撰寫任務化流程 • ⽇日後有⼈人加⼊入專案, 只要有這兩隻就能瞬間將環境建⽴立好
20.
Gulp起⼿手式(上) ! • gulp.task(name[, deps],
fn) 定義⼀一個任務名稱,接下來指定任務的⼯工作內容 • gulp.watch(glob[, opts, cb]) 關注特定檔案是否更動 • gulp.src(glob) 指定檔案來源 • gulp.dest(folder) 檔案存檔位置
21.
Gulp起⼿手式(下) • gulpfile.js ! var gulp
= require('gulp'); ! gulp.task('default',['build'] function() { // 系統預設直接執⾏行 }); ! gulp.task('build', function() { // 其他task預設不執⾏行,可透過default預先載⼊入 });
22.
Gulp起⼿手式(下) • gulpfile.js ! var gulp
= require('gulp'); ! gulp.task('default',['build'] function() { // 系統預設直接執⾏行 }); ! gulp.task('build', function() { // 其他task預設不執⾏行,可透過default預先載⼊入 }); 步驟⼀一:預設載⼊入gulp,才可使⽤用gulp功能。 例:gulp.task、gulp.watch
23.
Gulp起⼿手式(下) • gulpfile.js ! var gulp
= require('gulp'); ! gulp.task('default',['build'] function() { // 系統預設直接執⾏行 }); ! gulp.task('build', function() { // 其他task預設不執⾏行,可透過default預先載⼊入 });步驟⼆二:新增⼀一個task任務,命名為default, 當gulp啟動時,default會預設觸發。
24.
Gulp起⼿手式(下) • gulpfile.js ! var gulp
= require('gulp'); ! gulp.task('default',['build'] function() { // 系統預設直接執⾏行 }); ! gulp.task('build', function() { // 其他task預設不執⾏行,可透過default預先載⼊入 }); 步驟三:其他task系統預設不執⾏行,但可透過default預先載⼊入
25.
gulp-connect 建⽴立web server
26.
1.輸⼊入指令碼安裝 npm install gulp-connect
—-save-dev node_modules gulp-connect "devDependencies": { "gulp-connect": "^2.2.0" } package.json
27.
2.在gulpfile.js撰寫語法 var gulp =
require('gulp'), connect = require('gulp-connect'); gulp.task('server', function() { connect.server(); }); gulp.task('default',['server'],function(){});
28.
2.在gulpfile.js撰寫語法 var gulp =
require('gulp'), connect = require('gulp-connect'); gulp.task('server', function() { connect.server(); }); gulp.task('default',['server'],function(){}); 步驟⼀一:載⼊入node_modules裡⾯面的gulp-connect模組
29.
2.在gulpfile.js撰寫語法 var gulp =
require('gulp'), connect = require('gulp-connect'); gulp.task('server', function() { connect.server(); }); gulp.task('default',['server'],function(){}); 步驟⼆二:撰寫task任務,命名為server, connect.server()是gulp-connect的其中⼀一個功能, 即創⽴立⼀一個web server。
30.
2.在gulpfile.js撰寫語法 var gulp =
require('gulp'), connect = require('gulp-connect'); gulp.task('server', function() { connect.server(); }); gulp.task('default',['server'],function(){}); 步驟三:為了讓server能直接開啟,所以寫在預設 default裡⾯面。
31.
Sass、Livereload npm install gulp-compass
--dev-save
32.
gulpfile.js var gulp =
require('gulp'), connect = require('gulp-connect'), compass = require('gulp-compass'); gulp.task('server', function() { connect.server({ livereload: true }); }); gulp.task('compass', function() { gulp.src('./sass/*.sass') .pipe(compass()) .pipe(gulp.dest('./css')) .pipe(connect.reload()); }); gulp.task('default',['server','compass'],function(){ gulp.watch('./sass/*',['compass']); });
33.
gulpfile.js var gulp =
require('gulp'), connect = require('gulp-connect'), compass = require('gulp-compass'); gulp.task('server', function() { connect.server({ livereload: true }); }); gulp.task('compass', function() { gulp.src('./sass/*.sass') .pipe(compass()) .pipe(gulp.dest('./css')) .pipe(connect.reload()); }); gulp.task('default',['server','compass'],function(){ gulp.watch('./sass/*',['compass']); }); gulp-connect預設有livereload設定, 這些api⽤用法都要去NPM 官網都會寫。
34.
ˇ var gulp =
require('gulp'), connect = require('gulp-connect'), compass = require('gulp-compass'); gulp.task('server', function() { connect.server({ livereload: true }); }); gulp.task('compass', function() { gulp.src('./sass/*.sass') .pipe(compass()) .pipe(gulp.dest('./css')) .pipe(connect.reload()); }); gulp.task('default',['server','compass'],function(){ gulp.watch('./sass/*',['compass']); }); gulp.src指定檔案,*號代表所有Sass檔案, 可透過pipe將任務依序傳遞, gulp.dest是指最終將檔案所放置的位置, connect.reload()則是將瀏覽器重新refresh。
35.
ˇ var gulp =
require('gulp'), connect = require('gulp-connect'), compass = require('gulp-compass'); gulp.task('server', function() { connect.server({ livereload: true }); }); gulp.task('compass', function() { gulp.src('./sass/*.sass') .pipe(compass()) .pipe(gulp.dest('./css')) .pipe(connect.reload()); }); gulp.task('default',['server','compass'],function(){ gulp.watch('./sass/*',['compass']); }); 利⽤用gulp.watch監聽根⺫⽬目錄Sass資料夾內的檔案, 有更新就觸發compass的task。
36.
合併與壓縮js gulp-concat、gulp-uglify npm install gulp-concat
gulp-uglify --dev-save
37.
gulpfile.js var gulp =
require('gulp'), concat = require(‘gulp-concat') uglify = require('gulp-uglify'); gulp.task('js', function() { gulp.src('./js/*.js') .pipe(concat(‘app.js')) //將所有js合併成app.js .pipe(uglify()) //壓縮js .pipe(gulp.dest(‘./dist/js/')) }); ! gulp.task('default',['js'],function(){ gulp.watch(‘./js/*',['js']); //監聽js檔案 });
38.
DEMO
39.
熱⾨門Plugin • gulp-connect 開啟server •
gulp-concat 合併 • gulp-imagemin 圖⽚片壓縮 • gulp-clean 清除檔案 • gulp-rename 重新命名 • gulp-minify-css 壓縮CSS • gulp-jshint JS Debug • gulp-uglify 壓縮檔案
40.
preprocessor • gulp-compass • gulp-less •
gulp-stylus • gulp-jade • gulp-slim • gulp-coffee • gulp-livescript
41.
BrowserSync 跨載具測試、livereload npm install browser-sync
gulp --save-dev
42.
Bower 前端框架管理 by bower.json npm
install gulp-bower gulp --save-dev
43.
hologram 透過Sass、CSS註解同步撰寫style guides⽂文件 npm install
gulp-hologram gulp --save-dev
44.
mocha web測試 npm install gulp-mocha
gulp --save-dev
45.
建⽴立⾃自⼰己的⼀一條⻯⿓龍開發流程 建⽴立前後端環境 開發編譯 style⽂文件web測試專案上線 版本控管 後續維護
46.
sublime plugin • 1.emmet
- 減少打錯字的機會 • 2.HTML CSS JS Prettify - ⾃自動排版 • 3.SublimeLinter - Debug Code • 4.autofilename - ⾃自動搜尋檔案位置
47.
Thanks
48.
Q&A
Jetzt herunterladen