Download to read offline
![基本架構
• 建置一個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](https://image.slidesharecdn.com/vicweeklylearning20160504-160509011236/75/Vic-weekly-learning_20160504-5-2048.jpg)
![基本架構
• gulp.src
• 來源位置：gulp.src('./app/css/*.css')
• gulp.dest
• 輸出位置: gulp.dest('./build/css/')
• gulp.watch
• gulp.watch('./app/js/**',['uglify'])
• 建置環境app資料夾底下的js有做異動就執行uglify
請於此處放置頁尾文字6](https://image.slidesharecdn.com/vicweeklylearning20160504-160509011236/75/Vic-weekly-learning_20160504-6-2048.jpg)
Vic weekly learning_20160504
- 1.
- 2. 大綱 • What isgulp • 開發環境 • 基本架構 • 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.
- 8. 請於此處放置頁尾文字8 Thank you foryour listening