Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Gulp.js + Sublime plugin

⾃自動化前端任務流程
講者:廖洧杰
About Me
• 前端⼯工程師
• Desktop / Mobile 前端開發
• ⾼高雄前端發起⼈人 (2013/3)
• ⺫⽬目前投⼊入Node.js、MongoDB
進⼊入主題
什麼是⾃自動化?
節省⼈人⼯工時間
讓機器⾃自動處理任務
為什麼前端要導⼊入
⾃自動化?
CSS Sprite
舉個例⼦子
CSS Sprites
!
.logo{	
width:46px;	
height:46px;	
background: url(all.png) 0 0;	
}
http://www.smashingmagazine.com/2009/04/...
⼈人⽣生第⼀一個CSS sprite
1. 設計這張CSS Sprites花了我四個⼩小時
2. 圖⽚片時常需要開啟PS進⾏行編輯,必須精準定位
3. ⾃自訂class名稱
4. 時常位移沒算準,顯⽰示出額外的圖⽰示
5. 有新圖⽰示時,新增⼀...
後來改⽤用線上服務

http://goo.gl/J2nizo
直到遇上

Sass、Compass
@import "compass/utilities/sprites";	
@import "my-icons/*.png";	
@include all-my-icons-sprites;
!
.my-icons-delete,	
.my-i...
要將前端開發盡量整合
在同條線上⾮非常困難
https://github.com/JacksonTian/fks
Gulp
使⽤用javascript撰寫任務排程
將前後端任務有條理地
交給Gulp去運⾏行
前端開發流程
• 後端環境建置(Node.js、Ruby、PHP)
• 前端程式語⾔言(Jade、Coffee、Sass)
• Framework選擇(Angular、Bootstrap、jQuery)
• 程式優化⽅方案(測試、編譯、壓縮)
安裝Gulp
• 安裝Node.js
• 安裝Gulp npm install gulp -g
Gulp必備檔案
• package.json:整理gulp plugin
• gulpfile.js:撰寫任務化流程
• ⽇日後有⼈人加⼊入專案,

只要有這兩隻就能瞬間將環境建⽴立好
Gulp起⼿手式(上)
!
• gulp.task(name[, deps], fn)

定義⼀一個任務名稱,接下來指定任務的⼯工作內容
• gulp.watch(glob[, opts, cb])

關注特定檔案是否更動
• gulp.src...
Gulp起⼿手式(下)
• gulpfile.js
!
var gulp = require('gulp');	
!
gulp.task('default',['build'] function() {	
// 系統預設直接執⾏行	
});	
!...
Gulp起⼿手式(下)
• gulpfile.js
!
var gulp = require('gulp');	
!
gulp.task('default',['build'] function() {	
// 系統預設直接執⾏行	
});	
!...
Gulp起⼿手式(下)
• gulpfile.js
!
var gulp = require('gulp');	
!
gulp.task('default',['build'] function() {	
// 系統預設直接執⾏行	
});	
!...
Gulp起⼿手式(下)
• gulpfile.js
!
var gulp = require('gulp');	
!
gulp.task('default',['build'] function() {	
// 系統預設直接執⾏行	
});	
!...
gulp-connect
建⽴立web server
1.輸⼊入指令碼安裝
npm install gulp-connect —-save-dev
node_modules gulp-connect
"devDependencies": {	
"gulp-connect": "^2.2.0"	
}...
2.在gulpfile.js撰寫語法









var gulp = require('gulp'),	
connect = require('gulp-connect');	
gulp.task('server', function()...
2.在gulpfile.js撰寫語法









var gulp = require('gulp'),	
connect = require('gulp-connect');	
gulp.task('server', function()...
2.在gulpfile.js撰寫語法









var gulp = require('gulp'),	
connect = require('gulp-connect');	
gulp.task('server', function()...
2.在gulpfile.js撰寫語法









var gulp = require('gulp'),	
connect = require('gulp-connect');	
gulp.task('server', function()...
Sass、Livereload
npm install gulp-compass --dev-save
gulpfile.js

var gulp = require('gulp'),	
connect = require('gulp-connect'),	
compass = require('gulp-compass');	
gulp.task...
gulpfile.js

var gulp = require('gulp'),	
connect = require('gulp-connect'),	
compass = require('gulp-compass');	
gulp.task...
ˇ
var gulp = require('gulp'),	
connect = require('gulp-connect'),	
compass = require('gulp-compass');	
gulp.task('server',...
ˇ
var gulp = require('gulp'),	
connect = require('gulp-connect'),	
compass = require('gulp-compass');	
gulp.task('server',...
合併與壓縮js
gulp-concat、gulp-uglify
npm install gulp-concat gulp-uglify --dev-save
gulpfile.js

var gulp = require('gulp'),	
concat = require(‘gulp-concat')	
uglify = require('gulp-uglify');	
gulp.task('js'...
DEMO
熱⾨門Plugin
• gulp-connect 開啟server
• gulp-concat 合併
• gulp-imagemin 圖⽚片壓縮
• gulp-clean 清除檔案
• gulp-rename 重新命名
• gulp-minif...
preprocessor
• gulp-compass
• gulp-less
• gulp-stylus
• gulp-jade
• gulp-slim
• gulp-coffee
• gulp-livescript
BrowserSync
跨載具測試、livereload
npm install browser-sync gulp --save-dev
Bower
前端框架管理 by bower.json
npm install gulp-bower gulp --save-dev
hologram
透過Sass、CSS註解同步撰寫style guides⽂文件
npm install gulp-hologram gulp --save-dev
mocha
web測試
npm install gulp-mocha gulp --save-dev
建⽴立⾃自⼰己的⼀一條⻯⿓龍開發流程
建⽴立前後端環境 開發編譯
style⽂文件web測試專案上線
版本控管
後續維護
sublime plugin
• 1.emmet - 減少打錯字的機會
• 2.HTML CSS JS Prettify - ⾃自動排版
• 3.SublimeLinter - Debug Code
• 4.autofilename - ⾃自動搜...
Thanks
Q&A
Prochain SlideShare
Chargement dans…5
×

Gulp.js 自動化前端任務流程

10 354 vues

Publié le

Gulp.js 自動化前端任務流程

Publié dans : Internet
  • Login to see the comments

Gulp.js 自動化前端任務流程

  1. 1. Gulp.js + Sublime plugin
 ⾃自動化前端任務流程 講者:廖洧杰
  2. 2. About Me • 前端⼯工程師 • Desktop / Mobile 前端開發 • ⾼高雄前端發起⼈人 (2013/3) • ⺫⽬目前投⼊入Node.js、MongoDB
  3. 3. 進⼊入主題
  4. 4. 什麼是⾃自動化?
  5. 5. 節省⼈人⼯工時間 讓機器⾃自動處理任務
  6. 6. 為什麼前端要導⼊入 ⾃自動化?
  7. 7. CSS Sprite 舉個例⼦子
  8. 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. 9. ⼈人⽣生第⼀一個CSS sprite 1. 設計這張CSS Sprites花了我四個⼩小時 2. 圖⽚片時常需要開啟PS進⾏行編輯,必須精準定位 3. ⾃自訂class名稱 4. 時常位移沒算準,顯⽰示出額外的圖⽰示 5. 有新圖⽰示時,新增⼀一個⾄至少要10分鐘以上
  10. 10. 後來改⽤用線上服務
 http://goo.gl/J2nizo
  11. 11. 直到遇上
 Sass、Compass
  12. 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. 13. 要將前端開發盡量整合 在同條線上⾮非常困難
  14. 14. https://github.com/JacksonTian/fks
  15. 15. Gulp 使⽤用javascript撰寫任務排程
  16. 16. 將前後端任務有條理地 交給Gulp去運⾏行
  17. 17. 前端開發流程 • 後端環境建置(Node.js、Ruby、PHP) • 前端程式語⾔言(Jade、Coffee、Sass) • Framework選擇(Angular、Bootstrap、jQuery) • 程式優化⽅方案(測試、編譯、壓縮)
  18. 18. 安裝Gulp • 安裝Node.js • 安裝Gulp npm install gulp -g
  19. 19. Gulp必備檔案 • package.json:整理gulp plugin • gulpfile.js:撰寫任務化流程 • ⽇日後有⼈人加⼊入專案,
 只要有這兩隻就能瞬間將環境建⽴立好
  20. 20. Gulp起⼿手式(上) ! • gulp.task(name[, deps], fn)
 定義⼀一個任務名稱,接下來指定任務的⼯工作內容 • gulp.watch(glob[, opts, cb])
 關注特定檔案是否更動 • gulp.src(glob) 
 指定檔案來源 • gulp.dest(folder) 
 檔案存檔位置
  21. 21. Gulp起⼿手式(下) • gulpfile.js ! var gulp = require('gulp'); ! gulp.task('default',['build'] function() { // 系統預設直接執⾏行 }); ! gulp.task('build', function() { // 其他task預設不執⾏行,可透過default預先載⼊入 });
  22. 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. 23. Gulp起⼿手式(下) • gulpfile.js ! var gulp = require('gulp'); ! gulp.task('default',['build'] function() { // 系統預設直接執⾏行 }); ! gulp.task('build', function() { // 其他task預設不執⾏行,可透過default預先載⼊入 });步驟⼆二:新增⼀一個task任務,命名為default, 當gulp啟動時,default會預設觸發。
  24. 24. Gulp起⼿手式(下) • gulpfile.js ! var gulp = require('gulp'); ! gulp.task('default',['build'] function() { // 系統預設直接執⾏行 }); ! gulp.task('build', function() { // 其他task預設不執⾏行,可透過default預先載⼊入 }); 步驟三:其他task系統預設不執⾏行,但可透過default預先載⼊入
  25. 25. gulp-connect 建⽴立web server
  26. 26. 1.輸⼊入指令碼安裝 npm install gulp-connect —-save-dev node_modules gulp-connect "devDependencies": { "gulp-connect": "^2.2.0" } package.json
  27. 27. 2.在gulpfile.js撰寫語法
 
 
 
 
 var gulp = require('gulp'), connect = require('gulp-connect'); gulp.task('server', function() { connect.server(); }); gulp.task('default',['server'],function(){});
  28. 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. 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. 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. 31. Sass、Livereload npm install gulp-compass --dev-save
  32. 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. 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. 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. 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. 36. 合併與壓縮js gulp-concat、gulp-uglify npm install gulp-concat gulp-uglify --dev-save
  37. 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. 38. DEMO
  39. 39. 熱⾨門Plugin • gulp-connect 開啟server • gulp-concat 合併 • gulp-imagemin 圖⽚片壓縮 • gulp-clean 清除檔案 • gulp-rename 重新命名 • gulp-minify-css 壓縮CSS • gulp-jshint JS Debug • gulp-uglify 壓縮檔案
  40. 40. preprocessor • gulp-compass • gulp-less • gulp-stylus • gulp-jade • gulp-slim • gulp-coffee • gulp-livescript
  41. 41. BrowserSync 跨載具測試、livereload npm install browser-sync gulp --save-dev
  42. 42. Bower 前端框架管理 by bower.json npm install gulp-bower gulp --save-dev
  43. 43. hologram 透過Sass、CSS註解同步撰寫style guides⽂文件 npm install gulp-hologram gulp --save-dev
  44. 44. mocha web測試 npm install gulp-mocha gulp --save-dev
  45. 45. 建⽴立⾃自⼰己的⼀一條⻯⿓龍開發流程 建⽴立前後端環境 開發編譯 style⽂文件web測試專案上線 版本控管 後續維護
  46. 46. sublime plugin • 1.emmet - 減少打錯字的機會 • 2.HTML CSS JS Prettify - ⾃自動排版 • 3.SublimeLinter - Debug Code • 4.autofilename - ⾃自動搜尋檔案位置
  47. 47. Thanks
  48. 48. Q&A

×