Gulp4.0入門和實戰

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

2. 安裝gulp

npm install gulp -D --save

3. 建立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更爲經常使用。