gulp

1. gulp
Vic Chih 2016-05-04

2. 大綱
• What is gulp
• 開發環境
• 基本架構
• DEMO
請於此處放置頁尾文字2

3. What is gulp
• gulp 是一種前端的自動化開發引擎
• 可以利用它簡化或是流程化建置web server
• Pipeline的方式處理我們的需求
• 結構簡單 好讀
請於此處放置頁尾文字3

4. 開發環境
• 第一步：安裝node.js
• 基於node.js開發
• 第二步：npm install -g gulp
• 於cmd執行全域安裝
• 第三步：cd 到專案資料夾 輸入npm init初始化專案
• 產出package.json
• 第四步：在專案環境安裝gulp npm install gulp -save-dev
• -save-dev : devDependencies
• -save : dependencies
• 基礎環境完成!!“ 開始安裝你要的套件 並進行gulp應用
請於此處放置頁尾文字4

5. 基本架構
• 建置一個gulpfile.js
• Gulp.task
• 建置任務用
• gulp.task(taskname,[task1,task2(依存程序)],to do)
• 建立一個名稱叫做FirstMission的task
• gulp.task(‘FirstMission’,function(){ do something… });
• 建立一個名稱叫做SecondMission的task 他依存於FirstMission
• gulp.task(‘SecondMission’,[‘FirstMission’],function(){ });
• 預先執行!!
• gulp.task(‘default’,[‘SecondMission’]);
• 執行順序 ：FirstMission 、SecondMission 、 default
請於此處放置頁尾文字5

6. 基本架構
• gulp.src
• 來源位置：gulp.src('./app/css/*.css')
• gulp.dest
• 輸出位置: gulp.dest('./build/css/')
• gulp.watch
• gulp.watch('./app/js/**',['uglify'])
• 建置環境app資料夾底下的js有做異動就執行uglify
請於此處放置頁尾文字6

7. DEMO
DEMO
請於此處放置頁尾文字7

8. 請於此處放置頁尾文字8
Thank you for your listening