Gulp4.0入門和實戰

freephp發表於2021-01-21

gulp4.0入門和實戰

我最近遇到需要優化web的效能的任務，然後就搗鼓了一些對資原始檔優化壓縮的方案。由於之前的專案中有使用到gulp，所以在需要處理的web專案中也優先使用這個技術。

先聊聊gulp是什麼？
gulp被稱為基於流的自動化構建工具，也是用NodeJS編寫的額。使用NodeJs對檔案流的非同步處理，可以對資原始檔（js和css以及圖片）進行優化處理，包括檔案的合併和檔案內容的壓縮。最重要的是，這些工作都是自動化的，只要我們編寫好gulpfile.js檔案即可！
相較於webpack, gulp也更簡單，更基於程式導向的程式設計，適合需求簡單的打包壓縮工作。

最新版本的gulp是4.x，和之前的3.x的gulp有所不同，把cli分離出去了，所以需要單獨安裝gulp-cli。
在專案中使用gulp就簡單三步：

  1. 安裝gulp-cli
npm install gulp-cli -save
  1. 安裝gulp
npm install gulp -D --save
  1. 建立gulpfile.js

這第三步是和業務有關的，比如我想對一些css和js檔案進行優化，那麼需要引入gulp和需要的plugin，程式碼如下。

// 引入gulp物件和外掛
const {src, dest} = require('gulp');
const {series} = require('gulp');
const cssMin = require('gulp-minify-css');
const uglify=require('gulp-uglify');
const concat = require('gulp-concat');

然後封裝兩個方法，分別處理css檔案和js檔案。首先是針對css檔案的處理，如下：

function dealCss() {
    return src([
        './myapp/static/css/mobile.css',
        './myapp/static/css/all.css',
        './myapp/static/css/tablet.css',
        './myapp/static/css/wag.css'
    ]).pipe(concat('base.min.css')) // 合併成指定檔案
        .pipe(cssMin()) // 壓縮
        .pipe(dest('./myapp/css')); // 設定輸出路徑

上面的程式碼就把mobile.css、all.css和tablet.css以及wag.css合併成一個檔案base.min.css，並做了壓縮優化（minize）。
在編寫一個js檔案的處理，如下：

function dealJs() {
   return src([
       './myapp/js/image.js',
       './myapp/js/bar.js',
       './myapp/js/search.js',
       './myapp/js/tiny-images.js'
   ]).pipe(concat('imagepage.min.js'))
       .pipe(uglify({ mangle : false }))
       .pipe(dest('./myapp/pure/js/'));
}

最後就是把這兩個定義的方法（在gulp來看就是需要被回撥的任務）放置到任務佇列裡面，有兩種選擇，一種是使用並行的方式執行，一種是使用同步的方法執行，也就是一個任務執行完再按照順序執行下一個任務。

這裡我們不缺時間，就順序執行即可：

exports.default =series(dealCss, dealJs);

完整的程式碼如下所示：

// 引入gulp物件和外掛
const {src, dest} = require('gulp');
const {series} = require('gulp');
const cssMin = require('gulp-minify-css');
const uglify=require('gulp-uglify');
const concat = require('gulp-concat');

function dealCss() {
    return src([
        './myapp/static/css/mobile.css',
        './myapp/static/css/all.css',
        './myapp/static/css/tablet.css',
        './myapp/static/css/wag.css'
    ]).pipe(concat('base.min.css')) // 合併成指定檔案
        .pipe(cssMin()) // 壓縮
        .pipe(dest('./myapp/css')); // 設定輸出路徑
    
function dealJs() {
   return src([
       './myapp/js/image.js',
       './myapp/js/bar.js',
       './myapp/js/search.js',
       './myapp/js/tiny-images.js'
   ]).pipe(concat('imagepage.min.js'))
       .pipe(uglify({ mangle : false }))
       .pipe(dest('./myapp/pure/js/'));
}

exports.default = series(dealCss, dealJs);

執行gulp命令就可以自動完成上面兩個任務，gulp真的很高效！

還可以選擇並行的執行多個任務，只需要把最後一行程式碼改為：

exports.default = parallel(dealCss, dealJs);

parallel()可以讓多個任務被並行執行，一個任務發生錯誤，其他任務不受影響。而series必行安順序執行，所以一旦有報錯，後面的任務就不會被執行。通常如果有報錯，我們肯定需要解決它，所以在日常優化資源的場景下選擇series更為常用。

相關文章