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 自動化前端任務流程

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

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

Ähnlich wie Gulp.js 自動化前端任務流程 (20)

Mehr von 洧杰廖

Mehr von 洧杰廖 (12)