詳解 Gulp4 和 Gulp3 的區別

最近在開發幾個網站，為了優化一下前端代碼，就複習一下gulpjs，之前工作gulp用的版本比較老，但是今天看了新的版本，新的語法出了一下，但是為了時間，我決定使用之前gulp3的舊版本，後面發現自己環境的node的版本是最新的，所以不得讓我來瞭解一下gulp的新版本，裡面用到的最多就是commonjs的模塊化，解釋如下：

gulp4的官網地址： https://www.gulpjs.com.cn/

gulp3的官網地址： https://v3.gulpjs.com.cn/

 下麵代碼瞭解新語法：

const { src, dest, watch, task, series, parallel } = require('gulp');//gulp的文件流API
const rename                                       = require('gulp-rename');//文件重命名的插件
const uglify                                       = require('gulp-uglify');//壓縮JS文件的插件
const cleanCss                                     = require('gulp-clean-css');//壓縮CSS文件的插件
const connect                                      = require('gulp-connect');//熱更新的插件
const webserver                                    = require('gulp-webserver');//熱更新的插件
const clean                                        = require('gulp-clean');//刪除文件的插件
const fileInclude                                  = require('gulp-file-include'); //公共代碼復用的插件
const htmlmin                                      = require('gulp-htmlmin');//壓縮HTML文件的插件

//設置源文件和輸出文件的目錄配置
const path = {
    'html'           : './src/',
    'css'            : './src/css/',
    'js'             : './src/js/',
    'lib'            : './src/lib/',
    'component'      : './src/component/',
    'html_dist'      : './dist/',
    'css_dist'       : './dist/css/',
    'js_dist'        : './dist/js/',
    'lib_dist'       : './dist/lib/',
    'component_dist' : './dist/component/'
};


//設置HTML壓縮任務
task('html', function () {
    var options = {
        removeComments                : true, //清除HTML中的註釋
        collapseWhitespace            : true, //去除HTML中的空格
        collapseBooleanAttributes     : true, //省略布爾屬性的值<input type="checkbox" checked="true"> 壓縮後為 <input type="checkbox" checked>
        removeEmptyAttributes         : true, //刪除所有空格作屬性值<input type="checkbox" id=""> 壓縮後為 <input type="checkbox">
        removeScriptTypeAttributes    : true, //刪除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes : true, //刪除<style>和<link>的type="text/css"
        minifyJS                      : true, //壓縮頁面JS
        minifyCSS                     : true //壓縮頁面CSS
    };
    return src(path.html + '*.html')
        .pipe(htmlmin(options))
        .pipe(dest(path.html_dist));
})

//設置CSS壓縮任務
task('css', function () {
    return src(path.css + '*.css')
        .pipe(cleanCss())
        .pipe(rename({
            'suffix' : '.min'//添加尾碼名
        }))
        .pipe(dest(path.css_dist));
});

//設置JS壓縮任務
task('js', function () {
    return src(path.js + '*.js')
        .pipe(uglify())
        .pipe(rename({
            'suffix' : '.min'//添加尾碼名
        }))
        .pipe(dest(path.js_dist));
});

//設置第三方依賴任務 => [無需合併和壓縮等操作，直接輸出到指定目錄]
task('lib', function () {
    return src(path.lib + '*.js')
        .pipe(dest(path.lib_dist));
})

//設置公共代碼復用的任務 => [相當於組件的封裝]
task('fileInclude', function () {
    return src(path.component + '*.html')
        .pipe(fileInclude({
            prefix   : '@@',
            basepath : '@file'
        }))
        .pipe(dest(path.component_dist));
});

//設置刪除上一次創建的dist文件夾的任務 => [在打包之前，一般需要先清空原來的文件，保證當前文件是最新的]
task('clean', function () {
    return src('dist', {
        allowEmpty : true
    }).pipe(clean());//清除dist目錄
});


// 創建熱載入任務
task('reload', function () {
    return src('dist')
        .pipe(connect.reload());
})


//設置實時監控任務[熱載入]
task('watch', function () {
    watch(path.html, series('html', 'reload'));//監控HTML任務
    watch(path.css + '*.css', series('css', 'reload'));//監控CSS任務
    watch(path.js + '*.js', series('js', 'reload'));//監控JS任務
    watch(path.lib + '*.js', series('lib', 'reload'));//監控第三方JS任務
    watch(path.component + '*.html', series('fileInclude', 'reload'));//監控復用代碼文件的任務 => [相當於封裝組件]
});


//設置後臺服務任務【 -----   ⭐ ️方式一 ️ ----- 】
// task('server', function (done) {
//     connect.server({
//         root       : 'dist',//設置後臺服務訪問的預設目錄
//         port       : 8888,//設置後臺預設的訪問埠
//         livereload : true//開啟熱載入
//     });
//     done();//執行該服務
// });


//設置後臺服務任務【 -----   ⭐ ️方式二 ️ ----- 】
task('server', function () {
    return src('dist')
        .pipe(webserver({
            host             : 'localhost',//預設訪問的地址【功能變數名稱或者ip】
            port             : 8023,//預設訪問的埠號
            path             : '/',//訪問當前訪問目錄的根目錄 例如：表示為 dist/
            livereload       : true,//開啟熱載入
            directoryListing : false,//true 設置為false時，訪問預設的index.html
            fallback         : 'index.html',//預設訪問的入口文件 相對於設置的path路徑來說
            open             : true,//是否自動打開瀏覽器
            /**
             *@desc 代理配置 如下:
             *      proxies: [
             *          {
             *              source: '/api', target: 'http://backend.api/api'
             *
             *          }
             *      ]
             */
            proxies          : []//代理配置
        }));
})


//執行所有任務 => [gulp3]
// task('default', series(
//     'clean',//刪除上一次的文件夾，來保持當前為最新的數據
//     parallel([ 'html', 'css', 'js', 'lib', 'fileInclude' ]),//並行執行所有任務
//     'server',//啟動服務任務
//     'watch'//啟動監視任務
// ));

//執行所有任務 => [gulp4]
module.exports.default = series(
    'clean',
    parallel([ 'html', 'css', 'js', 'lib', 'fileInclude' ]),
    'server',
    'watch'
);

/**
 * @desc 總結 gulp4 的series() 和 parallel() 兩個新方法
 *  說明如下：
 *          1. series(任務1,任務2,...) => 使任務按順序執行，第一個任務完成，才會執行下一個任務，簡單來說相當於一個隊列。
 *          2. parallel(任務1,任務2,...) => 以最大併發來運行的任務,任務同時執行。
 *
 * @desc 總結 gulp-connect() 和 gulp-webserver() 方法
 *   說明如下：
 *          1. gulp-connect()  => 內部connect.server()返回的是一個對象，
 *             所以不能直接返回，只能在處理完成之後，直接返回當前傳入的參數，該參數為該函數本身。
 *          2. gulp-webserver() => 該插件的特點是可以設置代理，當前處理的管道函數最後直接返回就好了，但是反應相對比較慢
 *
 * @desc 總結 gulp3【本章任務的處理方式哦】 和 gulp4 處理任務的方式：
 *          1. gulp3 處理任務方式是：gulp.task(任務名，處理函數)
 *          2. gulp4 處理任務方式是：module.exports.任務名 = 任務名（可以是一個匿名函數或者是函數名）
 *              寫法如下：
 *              const test = function(done) {
 *                          done();
 *                    };
 *              或者
 *                   function test(done) {
 *                      done();
 *                   }
 *              最後執行方法：module.exports.test = test
 *              後臺執行命令為：gulp test
 */

本文來自博客園，作者：Carver-聽風，轉載請註明原文鏈接：https://www.cnblogs.com/carver/p/17072881.html