# Gulp
任務自動化管理工具。適用於 2020 年 1 月。
## 安裝
1. 安裝 Node.js
2. `npm install -g gulp-cli` 安裝 Gulp 的 Cli
3. 開 cmd 移動到專案資料夾`npm init`（一直 Enter 即可）
4. `npm install --save-dev gulp`在開發環境安裝 Gulp 的 package
5. `gulp --version` 確認安裝成功
6. 根目錄下創建 gulpfile.js
7. 宣告常數，請求`const gulp = require('gulp');`之後範例 API 以 gulp 為常數

## API
### task()
`gulp.task('task-name', function(){return...});`
執行工作的內容，`task-name`自訂工作名，之後 VScode 的 powershell 就可以輸入`gulp task-name`並執行該工作內的 function
### src()
`gulp.src('src/.file');`
執行工作的資料來源，引號內指定路徑，或該路徑下的檔案。可以用`*`指定所有該檔案類型，例如 'src/*.css' 為 src 資料夾下的所有 CSS 檔案。
### dest()
`gulp.dest('dist/');`
執行工作的結果位置，處理完的檔案文件會送到指定位置。如果工作內沒有進行任何變動，則會進行複製。
### watch()
`gulp.watch('src/', gulp.series('task-name'));`
監聽指定資料夾或其中的檔案，若發生變動（存檔後）就執行工作。
### pipe()
`.pipe(...)`
上一件程式碼執行後再執行下一件
## 實例 - 存檔後自動合併與 uglify CSS 檔與 JS 檔
需要額外 npm install gulp 其他的 API，以及一個 del API 協助。
`npm install --save-dev gulp-concat gulp-uglify gulp-uglifycss del`
{%gist lizaosan/cefc14f5584c6f3e7809bb9227750d1f%}
## 參考
* [Gulpjs](https://gulpjs.com/)
* [Gulp 入門教學 - 安裝 Gulp.js - 男丁格爾](https://abgne.tw/web/gulp/gulp-tuts-install-gulp-js.html)（過期 2015）
* [Gulp 學習 1 - 安裝與執行 - Oxxo Studio](https://www.oxxostudio.tw/articles/201503/gulp-install-webserver.html)（過期 2015）
* [Gulp 安裝與介紹 - iT 邦幫忙 Duran Hsieh](https://ithelp.ithome.com.tw/articles/10185420) （2017）

###### tags: `javascript` `gulp`