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/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

⼈人⽣生第⼀一個CSS sprite1. 設計這張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

• gulpfile.js：撰寫任務化流程

• ⽇日後有⼈人加⼊入專案，只要有這兩隻就能瞬間將環境建⽴立好

Gulp起⼿手式(上)!

• gulp.task(name[, deps], fn)定義⼀一個任務名稱，接下來指定任務的⼯工作內容

• gulp.watch(glob[, opts, cb])關注特定檔案是否更動

• gulp.src(glob) 指定檔案來源

• gulp.dest(folder) 檔案存檔位置

Gulp起⼿手式(下)• gulpfile.js

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

Gulp起⼿手式(下)• gulpfile.js

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

步驟⼀一：預設載⼊入gulp，才可使⽤用gulp功能。 例：gulp.task、gulp.watch

Gulp起⼿手式(下)• gulpfile.js

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

步驟⼆二：新增⼀一個task任務，命名為default， 當gulp啟動時，default會預設觸發。

Gulp起⼿手式(下)• gulpfile.js

!var gulp = require('gulp');!gulp.task('default',['build'] function() { // 系統預設直接執⾏行});!gulp.task('build', function() { // 其他task預設不執⾏行，可透過default預先載⼊入}); 步驟三：其他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.在gulpfile.js撰寫語法

var gulp = require('gulp'), connect = require('gulp-connect');gulp.task('server', function() { connect.server();});gulp.task('default',['server'],function(){});

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模組

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。

2.在gulpfile.js撰寫語法

var gulp = require('gulp'), connect = require('gulp-connect');gulp.task('server', function() { connect.server();});gulp.task('default',['server'],function(){});

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

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

gulpfile.jsvar 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']);});

gulpfile.jsvar 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 官網都會寫。

ˇ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。

ˇ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。

合併與壓縮jsgulp-concat、gulp-uglify

npm install gulp-concat gulp-uglify --dev-save

gulpfile.jsvar 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檔案});

DEMO

熱⾨門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

mochaweb測試

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