Gulp - 組合任務

任務使 Gulp 的配置能夠採用模組化方法。我們需要為每個依賴項建立任務，並在我們找到並安裝其他外掛時將其累加。Gulp 任務將具有以下結構：

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

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

安裝外掛

讓我們以一個名為minify-css的外掛為例，用於合併和壓縮所有 CSS 指令碼。可以使用 npm 安裝它，如下面的命令所示：

npm install gulp-minify-css --save-dev

要使用“gulp-minify-css 外掛”，您需要安裝另一個名為“gulp-autoprefixer”的外掛，如下面的命令所示：

npm install gulp-autoprefixer --save-dev

要連線 CSS 檔案，請安裝 gulp-concat，如下面的命令所示：

npm install gulp-concat --save-dev

安裝外掛後，需要在配置檔案中編寫依賴項，如下所示：

var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');

向 Gulp 檔案新增任務

我們需要為每個依賴項建立任務，並在安裝外掛時將其累加。Gulp 任務將具有以下結構：

gulp.task('styles', function() {
   gulp.src(['src/styles/*.css'])
   .pipe(concat('styles.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'));
});

‘concat’ 外掛連線 CSS 檔案，‘autoprefix’ 外掛指示所有瀏覽器的當前版本和先前版本。它壓縮 src 資料夾中的所有 CSS 指令碼，並透過呼叫帶有引數的 ‘dest’ 方法將其複製到 build 資料夾，該引數表示目標目錄。

要執行任務，請在專案目錄中使用以下命令：

gulp styles

類似地，我們將使用另一個名為 ‘gulp-imagemin’ 的外掛來壓縮影像檔案，可以使用以下命令安裝：

npm install gulp-imagemin --save-dev

您可以使用以下命令將依賴項新增到配置檔案中：

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

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

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 imagemin

組合多個任務

您可以透過在配置檔案中建立預設任務來一次執行多個任務，如下面的程式碼所示：

gulp.task('default', ['imagemin', 'styles'], function() {

});

Gulp 檔案已設定並準備執行。在專案目錄中執行以下命令以執行上述組合任務：

gulp

使用上述命令執行任務時，您將在命令提示符下獲得以下結果：

C:\work>gulp
[16:08:51] Using gulpfile C:\work\gulpfile.js
[16:08:51] Starting 'imagemin'...
[16:08:51] Finished 'imagemin' after 20 ms
[16:08:51] Starting 'styles'...
[16:08:51] Finished 'styles' after 13 ms
[16:08:51] Starting 'default'...
[16:08:51] Finished 'default' after 6.13 ms
[16:08:51] gulp-imagemin: Minified 0 images

列印頁面