Gulp初探

| 介紹

gulp 官網

gulp是一個開源JavaScript工具包，由Eric Sc​​hoffstall創建，用作前端Web開發中的流構建系統。 它是一個基於Node.js和npm的任務運行器，用於自動化Web開發中涉及的耗時和重複性任務，如縮小，連接，緩存清除，單元測試，linting，優化等。

Gulp 四個基本API：：

name	discript
gulp.task	執行任務
gulp.src	執行資料來源
gulp.dest	執行結果位置
gulp.watch	監視執行過程中，資料是否變更

操作事件使用pipe(), 其串接概念圖如下:

| 安裝與Try It (mac經驗)

STEP 1. 於terminal 輸入 sudo npm install gulp -g

-g 安裝在目前的電腦上, 目的是啟用 “gulp” 這個指令
當完成安裝時, 輸入gulp -v, 當terminal回應 command not found, 試著：
輸入export PATH=$PATH:/Users/denis/.npm-global/bin

STEP 2. 建立新檔案夾、npm init

STEP 3. npm install gulp –save

裝在目前的專案資料夾內, 目的是執行 gulp 時可以取用的套件

STEP 4. 建立新檔案
新增一個gulpfile.js 、source/ index.html

STEP 5. 於gulpfile.js建立資料

var gulp = require('gulp')
// copyHTML 為自定義任務名稱
gulp.task('copyHTML', function() {
  // 抓取source 裡的所有HTML
  return gulp.src('./source/**/*.html')
   .pipe(gulp.dest('./public/'))
})

STEP 6. 於terminal執行Gulp

gulp [任務名稱 ] ex: gulp copyHTML