Upload
-
View
7.582
Download
0
Embed Size (px)
Citation preview
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