Gulp 前端自動化 - 自動清除檔案與資料夾

前言

Gulp 主要用來幫助我們使前端的一切建構動作都能夠自動化，但你會發現先前的套件範例並不是這麼的自動化，主要缺點為當我們執行編譯時，都必須刪除之前編譯產生的內容，以確保最新編譯結果不互相干擾，這有違自動化的用意。此篇將介紹使用 del 套件在編譯開始前刪除上一次的編譯結果，達到完全自動化目的。

筆記重點

del 安裝
del 基本使用
del 可傳遞選項
補充：gulp-clean 套件使用

del 安裝

套件連結：del

1	$ npm install del

網上相關文章大多都是使用 gulp-clean 套件來做介紹，但在 Gulp 的官方範例中則是使用 del 套件作演示，其原因可能為單純的刪除檔案就不要另外造 Gulp 插件輪子了，使用 Node.js 原生套件是更明智的選擇。

del 基本使用

此次範例會結合 gulp-sass 套件一起使用，相關文章連結：gulp-sass

初始專案結構：

gulp-demo/
│
├─── node_modules/
├─── source/
│   │
│   └─── scss/
│       │
│       └─── all.scss     # SCSS 主檔案
│
├─── gulpfile.js          # Gulp 配置檔案
├─── package-lock.json
└─── package.json         # 安裝 gulp、gulp-sass、del

載入並使用 del：

const gulp = require('gulp');
const del = require('del'); // 載入 del 套件
const sass = require('gulp-sass'); // 載入 gulp-sass 套件

/* --- 編譯 SCSS --- */
gulp.task('sass', () => {
  return gulp
    .src('./source/scss/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./public/css'));
});

/* --- 刪除指定目錄檔案 -- */
gulp.task('clean', () => {
  return del(['./public']); // 需刪除檔案或目錄
});

/* --- 同步運行任務 --- */
gulp.task('build', gulp.series('clean', 'sass'));

執行指定任務：

1	$ gulp build

由於編譯速度太快，導致我們無法明確知道 del 套件是否成功刪除先前編譯後檔案，我們可在 ./public 資料夾下新增一個 index.html 檔案，再次執行 gulp build 指令。

測試 public 資料夾是否為新：

1
2
3

 ├─── public/
 │   │
+│   └─── index.html   # 測試是否被刪除

del 套件刪除成功：

├─── public/
│   │
│   └─── css/
│       │
│       └─── all.css

del 套件刪除失敗：

├─── public/
│   │
│   └─── css/
│       │
│       └─── all.css
│   │
│   └─── index.html   # 依舊沒被刪除，代表資料夾不是新的

由於我們是指定刪除整個 ./public 資料夾，這也代表編譯完成時，整個資料夾都會是新的才對，del 套件是否使用成功可參考上面結構。

del 可傳遞選項

可參考 globby Options 可傳遞參數列表，以下為常用的參數配置：

gitignore：true | false
匹配 .gitignore 文件中的忽略項目，默認為 false

範例：

gulp.task('clean', () => {
  return del(['./public'], {
    gitignore: true,
  });
});

補充：gulp-clean 套件使用

由於一部分人還是使用 gulp-clean 套件來完成刪除檔案與資料夾操作，故在這邊補充及簡單介紹。

套件連結：gulp-clean

1	$ npm install gulp-clean

載入並使用 gulp-clean：

const gulp = require('gulp');
const sass = require('gulp-sass'); // 載入 gulp-sass 套件
const clean = require('gulp-clean'); // 載入 gulp-clean 套件

/* --- 編譯 SCSS --- */
gulp.task('sass', () => {
  return gulp
    .src('./source/scss/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./public/css'));
});

/* --- 刪除指定目錄檔案 -- */
gulp.task('clean', () => {
  return gulp.src('./public', { read: false, allowEmpty: true }).pipe(clean());
});

/* --- 同步運行任務 --- */
gulp.task('build', gulp.series('clean', 'sass'));

使用 gulp-clean 套件與 del 套件不同的地方在於，gulp-clean 使用 gulp.src() 作為刪除依據，而 del 則是直接使用本身 API 作為刪除依據，在上面範例中，我們在 gulp.src() 傳遞了一個物件，這個物件為自身的可傳遞選項，分別為 read 與 allowEmpty ，read 選項可避免 Gulp 讀取文件中的內容，單純的傳入任務依據，提高效能，而 allowEmpty 為允許任務依據為空，此選項可避免 gulp-clean 未偵測到 ./public 資料時執行刪除所發生的錯誤，del 套件預設就有這一個選項，實際使用下來，del 套件明顯較為方便。