More Related Content
Similar to Gulp
Similar to Gulp (20)
Gulp
- 1. Gulp.js The streaming build system
- 2. Build World • make : 傳統Unix建置工具 • Ant->Maven->Gradle : Java世界 • Grunt->Gulp : Javascript世界
- 3. Why Build Tools? • 專案越大，越多版本，在部署前就越多調 整的步驟，針對每個不同版本去做手動調 整不但繁瑣費時而且容易出錯 • 透過Build Tools，可以針對不同版本達到輕 鬆的”一鍵部署”，減少部署所需時間與出錯 率
- 4. What is Gulp? (1) Npm 套件 (2) 用來執行自動化的建置工作 (3) 為了改良Grunt而生
- 5. Grunt vs Gulp Grunt Gulp 1. Focus on config 2. 許多內建常用task 3. synchronous，task by task 1. Focus on code 2. 幾乎都是社群外掛 3. asynchronous執行， 每個task可以同時執 行
- 6. How do we use Gulp? 將繁瑣的建置流程透過程式來自動化執行 包含: (1) 壓縮CSS/JS (2) 將SASS/LESS編譯成CSS (3) 壓縮圖片 (4) 將CSS加入前綴 … 以及透過Gulp的外掛可以自動更新Browser內容， 增加開發效率
- 7. 安裝Gulp 安裝 gulp command，這樣才可以在command line使用 gulp$ npm install gulp -g
- 8. 在專案目錄下設定gulp環境 $ npm init 如果專案目錄底下沒有package.json，則先初始化 $ npm install gulp --save-dev 安裝gulp套件內容於目前專案目錄
- 9. 建立gulpfile.js var gulp = require('gulp'); gulp.task('default', function() { console.log("I have configured a gulpfile"); }); 在專案目錄底下建立一個gulpfile.js，並執行gulp， 這時候應該會印出” I have configured a gulpfile”
- 11. 將需求流程化 (1) 將專案內容複製一份到dist，方便修改 (2) 替換SERVER_URL (3) 壓縮專案 (4) 刪除Server上舊的專案 (5) 上傳zip (6) 解壓縮zip (7) 刪除zip
- 12. 安裝所需的Gulp套件 • gulp-html-replace (替換SERVER_URL) • gulp-zip (壓縮zip) • gulp-ssh (ssh連server) • gulp-clean (清dist資料夾) • gulp-run-sequence (確保task依序執行) $ npm install –save-dev gulp-html-replace gulp-zip gulp-ssh gulp-clean gulp-run-sequence
- 13. 實戰 • 套用於 angular-standardweb • 套用於 grails-statndardplatform
- 15. Gulp 與 IntelliJ
- 16. Gulp 步驟複習 (1) npm init，建立npm套件環境 (2) 透過npm install安裝 gulp與gulp相關plugin (3) 建立並撰寫gulpfile.js (4) 利用gulp command執行task
- 17. 第一次使用Gulp Deploy (1) (sudo) npm install -g gulp (2) npm install (3) 跟UL要sshConfig.json，並放在專案根目錄 (4) gulp deploy
- 18. 其他Grails專案套用目前設定 (1) 複製stanrd-platform的package.json與 gulpfile.js (2) npm install (3) 修改gulpfile.js內的warName (4) 在.gitigrnoe加入 sshConfig.json (5) 加入sshConfig.json於專案根目錄 (6) gulp deploy
- 19. Gulp 語法複習 - gulp.task(‘taskName’, func) - gulp.task(‘taskName’, [task1, task2..], func) - gulp.src(‘path’) - gulp.pipe(…handle stream) - gulp.dest(output path)
- 21. Browse Sync 同步更新 $ npm install -g browser-sync $ browser-sync start --server –files "**" 一但html或css更動，會自動更新web