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

Gulp.js + Sublime plugin 
⾃自動化前端任務流程
講者：廖洧杰

About Me
• 前端⼯工程師
• Desktop / Mobile 前端開發
• ⾼高雄前端發起⼈人 (2013/3)
• ⺫⽬目前投⼊入Node.js、MongoDB

節省⼈人⼯工時間
讓機器⾃自動處理任務

為什麼前端要導⼊入
⾃自動化？

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/

⼈人⽣生第⼀一個CSS sprite
1. 設計這張CSS Sprites花了我四個⼩小時
2. 圖⽚片時常需要開啟PS進⾏行編輯，必須精準定位
3. ⾃自訂class名稱
4. 時常位移沒算準，顯⽰示出額外的圖⽰示
5. 有新圖⽰示時，新增⼀一個⾄至少要10分鐘以上

後來改⽤用線上服務 
http://goo.gl/J2nizo

直到遇上 
Sass、Compass

@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

要將前端開發盡量整合
在同條線上⾮非常困難

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
• gulpﬁle.js：撰寫任務化流程
• ⽇日後有⼈人加⼊入專案， 
只要有這兩隻就能瞬間將環境建⽴立好

Gulp起⼿手式(上)
!
• gulp.task(name[, deps], fn) 
定義⼀一個任務名稱，接下來指定任務的⼯工作內容
• gulp.watch(glob[, opts, cb]) 
關注特定檔案是否更動
• gulp.src(glob)  
指定檔案來源
• gulp.dest(folder)  
檔案存檔位置

Gulp起⼿手式(下)
• gulpﬁle.js
!
var gulp = require('gulp');
!
gulp.task('default',['build'] function() {
// 系統預設直接執⾏行
});
!
gulp.task('build', function() {
// 其他task預設不執⾏行，可透過default預先載⼊入
});

• gulpﬁle.js
!
!
});
!
});
步驟⼀一：預設載⼊入gulp，才可使⽤用gulp功能。 
例：gulp.task、gulp.watch

• gulpﬁle.js
!
!
});
!
});步驟⼆二：新增⼀一個task任務，命名為default，
當gulp啟動時，default會預設觸發。

• gulpﬁle.js
!
!
});
!
});
步驟三：其他task系統預設不執⾏行，但可透過default預先載⼊入

gulp-connect
建⽴立web server

1.輸⼊入指令碼安裝
npm install gulp-connect —-save-dev
node_modules gulp-connect
"devDependencies": {
"gulp-connect": "^2.2.0"
}
package.json

2.在gulpﬁle.js撰寫語法 
 
 
 
 
var gulp = require('gulp'),
connect = require('gulp-connect');
gulp.task('server', function() {
connect.server();
});
gulp.task('default',['server'],function(){});

 
 
 
 
connect.server();
});
步驟⼀一：載⼊入node_modules裡⾯面的gulp-connect模組

 
 
 
 
connect.server();
});
步驟⼆二：撰寫task任務，命名為server，
connect.server()是gulp-connect的其中⼀一個功能，
即創⽴立⼀一個web server。

 
 
 
 
connect.server();
});
步驟三：為了讓server能直接開啟，所以寫在預設
default裡⾯面。

Sass、Livereload
npm install gulp-compass --dev-save

gulpﬁle.js 
connect = require('gulp-connect'),
compass = require('gulp-compass');
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ﬁle.js 
connect.server({
livereload: true
});
});
.pipe(compass())
});
});
gulp-connect預設有livereload設定， 
這些api⽤用法都要去NPM 官網都會寫。

ˇ
connect.server({
livereload: true
});
});
.pipe(compass())
});
});
gulp.src指定檔案，*號代表所有Sass檔案，
可透過pipe將任務依序傳遞，
gulp.dest是指最終將檔案所放置的位置，
connect.reload()則是將瀏覽器重新refresh。

ˇ
connect.server({
livereload: true
});
});
.pipe(compass())
});
});
利⽤用gulp.watch監聽根⺫⽬目錄Sass資料夾內的檔案，
有更新就觸發compass的task。

合併與壓縮js
gulp-concat、gulp-uglify
npm install gulp-concat gulp-uglify --dev-save

gulpﬁle.js 
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檔案
});

熱⾨門Plugin
• gulp-connect 開啟server
• gulp-concat 合併
• gulp-imagemin 圖⽚片壓縮
• gulp-clean 清除檔案
• gulp-rename 重新命名
• gulp-minify-css 壓縮CSS
• gulp-jshint JS Debug
• gulp-uglify 壓縮檔案

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.autoﬁlename - ⾃自動搜尋檔案位置

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

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

Similar a Gulp.js 自動化前端任務流程 (20)

Más de 洧杰廖

Más de 洧杰廖 (12)