Gulp - 應用開發

在之前的章節中，您已經學習了Gulp 安裝和Gulp 基礎，其中包括 Gulp 的構建系統、包管理器、任務執行器、Gulp 的結構等。

在本節中，我們將學習開發應用程式的基礎知識，包括以下內容：

• 宣告所需的依賴項
• 為依賴項建立任務
• 執行任務
• 監聽任務

依賴項宣告

安裝應用程式的外掛時，需要指定外掛的依賴項。依賴項由包管理器（如 bower 和 npm）處理。

讓我們以一個名為gulp-imagemin的外掛為例，在配置檔案中定義它的依賴項。此外掛可用於壓縮影像檔案，並可以使用以下命令列安裝：

npm install gulp-imagemin --save-dev

您可以將依賴項新增到配置檔案中，如下面的程式碼所示。

var imagemin = require('gulp-imagemin');

以上程式碼包含了該外掛，並將其作為一個名為imagemin的物件包含。

為依賴項建立任務

任務使配置 Gulp 能夠採用模組化的方法。我們需要為每個依賴項建立一個任務，隨著我們發現並安裝其他外掛，我們將把這些任務新增到一起。Gulp 任務將具有以下結構：

gulp.task('task-name', function() {
   //do stuff here
});

其中“task-name”是一個字串名稱，“function()”執行您的任務。“gulp.task”將函式註冊為名稱內的任務，並指定對其他任務的依賴關係。

您可以為上面定義的依賴項建立任務，如下面的程式碼所示。

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';

   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

影像位於src/images/**/*，儲存在 img_srcobject 中。它透過 imagemin 建構函式建立的其他函式進行管道傳輸。它壓縮 src 資料夾中的影像，並透過使用表示目標目錄的引數呼叫dest方法將其複製到 build 資料夾。

執行任務

Gulp 檔案已設定完畢並準備執行。在您的專案目錄中使用以下命令執行任務：

gulp imagemin

使用上述命令執行任務後，您將在命令提示符中看到以下結果：

C:\work>gulp imagemin
[16:59:09] Using gulpfile C:\work\gulpfile.js
[16:59:09] Starting 'imagemin'...
[16:59:09] Finished 'imagemin' after 19 ms
[16:59:09] gulp-imagemin: Minified 2 images (saved 80.81 kB - 16.9%)