(3) Gulp-撰寫gulp file

發表於 更新於 分類於
Gulp前端自動化工具介紹

前言

前面已經將專案的環境與gulp都安裝好了，這節會開始介紹如何撰寫你的第一支 gulp file

開始撰寫 gulp file

一開始先在專案的根目錄新增一個檔案 gulpfile.js檔案

然後在根目錄 新增一個 source 資料夾
並在source資料夾內新增一個 style.css

img

在gulpfile.js 最上面先引入 GULP

1
const gulp = require('gulp');

然後我們可以新增一個簡單的gulp任務

1
2
3
4
funciton copyFile() {
   gulp.src('./source/**/*/.css')
     .pipe(gulp.dest('./public/css'))
}

上面這段程式中，我們用了 gulp.src() 來指定來源檔案的位置，
並用 gulp.dest() 將檔案輸出到指定的public資料夾。

然後可以開啟 commend line 輸入指令 

1
gulp copyFile

就會發現檔案已經被輸出到 public 資料夾囉。

下堂課會開始介紹 其他的各種gulp任務喔。