詳解 Gulp4 和 Gulp3 的區別

来源:https://www.cnblogs.com/carver/archive/2023/01/29/17072881.html
-Advertisement-
Play Games

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


最近在開發幾個網站,為了優化一下前端代碼,就複習一下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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一 引入 考慮實現一種機械泵控制項。 機械泵是工業中通常用來製造真空的一類設備,我們在繪製界面UI時希望可以生動形象地來表述一個機械泵,下麵講述了一種簡單的實現。 二 MechanicalPumpControl 聲明一個MechanicalPumpControl的自定義控制項,它繼承自Control類。 ...
  • 前言 Keil C51 是 51 系列相容單片機 C 語言軟體開發系統,支持 8051 微控制器體繫結構的 Keil 開發工具,適合每個階段的開發人員,不管是專業的應用工程師,還是剛學習嵌入式軟體開發的學生。 本篇博主將詳細介紹嵌入式集成開發環境 Keil C51 的安裝與註冊方法,以及國產 STC ...
  • xz是什麼 高壓縮率的工具,它使用 LZMA2 壓縮演算法,生成的壓縮文件比傳統使用的 gzip、bzip2 生成的壓縮文件更小, 不過xz也有一個壞處就是壓縮時間比較長,比7z壓縮時間還長一些。不過壓縮主要用於歸檔,不介意的可以忽略。 擅長壓縮文本和日誌文件,針對這塊的壓縮率,是目前我發現效率最高的 ...
  • Docker的常用命令 幫助命令 docker version # docker版本 docker info # 顯示docker的系統信息,包括鏡像和容器的數量 docker [命令] --help # 查看某個具體的命令 鏡像命令 查看下載的所有鏡像 # docker images REPOSI ...
  • 一:背景 1. 講故事 大家都知道資料庫應用程式 它天生需要圍繞著數據文件打轉,諸如包含數據的 .mdf,事務日誌的 .ldf,很多時候深入瞭解這兩類文件的合成原理,差不多對資料庫就能理解一半了,關於 .mdf 的合成前面的文章已經有所介紹,這篇我們來聊一下 .ldf 的一些內部知識,比如 LSN。 ...
  • props props簡單使用 class Person extends React.Component { render() { return ( <ul> <li>姓名:{this.props.name}</li> <li>年齡:{this.props.age}</li> <li>性別:{thi ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 需求描述 目前大多數PC端應用都有配套的移動端APP,如微信,淘寶等,通過使用手機APP上的掃一掃功能去掃頁面二維碼圖片進行登錄,使得用戶登錄操作更方便,安全,快捷。 思路解析 PC 掃碼原理? 掃碼登錄功能涉及到網頁端、伺服器和手機端, ...
  • 一、文件上傳 1、普通文件上傳 JavaScript 可以使用表單提交來實現文件上傳。首先,在 HTML 中創建一個文件輸入框: <input type="file" id="fileInput"> 然後,在 JavaScript 中獲取文件輸入框的引用,併在其上設置事件監聽器,如下所示: var ...
一周排行
    -Advertisement-
    Play Games
  • 1. 說明 /* Performs operations on System.String instances that contain file or directory path information. These operations are performed in a cross-pla ...
  • 視頻地址:【WebApi+Vue3從0到1搭建《許可權管理系統》系列視頻:搭建JWT系統鑒權-嗶哩嗶哩】 https://b23.tv/R6cOcDO qq群:801913255 一、在appsettings.json中設置鑒權屬性 /*jwt鑒權*/ "JwtSetting": { "Issuer" ...
  • 引言 集成測試可在包含應用支持基礎結構(如資料庫、文件系統和網路)的級別上確保應用組件功能正常。 ASP.NET Core 通過將單元測試框架與測試 Web 主機和記憶體中測試伺服器結合使用來支持集成測試。 簡介 集成測試與單元測試相比,能夠在更廣泛的級別上評估應用的組件,確認多個組件一起工作以生成預 ...
  • 在.NET Emit編程中,我們探討了運算操作指令的重要性和應用。這些指令包括各種數學運算、位操作和比較操作,能夠在動態生成的代碼中實現對數據的處理和操作。通過這些指令,開發人員可以靈活地進行算術運算、邏輯運算和比較操作,從而實現各種複雜的演算法和邏輯......本篇之後,將進入第七部分:實戰項目 ...
  • 前言 多表頭表格是一個常見的業務需求,然而WPF中卻沒有預設實現這個功能,得益於WPF強大的控制項模板設計,我們可以通過修改控制項模板的方式自己實現它。 一、需求分析 下圖為一個典型的統計表格,統計1-12月的數據。 此時我們有一個需求,需要將月份按季度劃分,以便能夠直觀地看到季度統計數據,以下為該需求 ...
  • 如何將 ASP.NET Core MVC 項目的視圖分離到另一個項目 在當下這個年代 SPA 已是主流,人們早已忘記了 MVC 以及 Razor 的故事。但是在某些場景下 SSR 還是有意想不到效果。比如某些靜態頁面,比如追求首屏載入速度的時候。最近在項目中回歸傳統效果還是不錯。 有的時候我們希望將 ...
  • System.AggregateException: 發生一個或多個錯誤。 > Microsoft.WebTools.Shared.Exceptions.WebToolsException: 生成失敗。檢查輸出視窗瞭解更多詳細信息。 內部異常堆棧跟蹤的結尾 > (內部異常 #0) Microsoft ...
  • 引言 在上一章節我們實戰了在Asp.Net Core中的項目實戰,這一章節講解一下如何測試Asp.Net Core的中間件。 TestServer 還記得我們在集成測試中提供的TestServer嗎? TestServer 是由 Microsoft.AspNetCore.TestHost 包提供的。 ...
  • 在發現結果為真的WHEN子句時,CASE表達式的真假值判斷會終止,剩餘的WHEN子句會被忽略: CASE WHEN col_1 IN ('a', 'b') THEN '第一' WHEN col_1 IN ('a') THEN '第二' ELSE '其他' END 註意: 統一各分支返回的數據類型. ...
  • 在C#編程世界中,語法的精妙之處往往體現在那些看似微小卻極具影響力的符號與結構之中。其中,“_ =” 這一組合突然出現還真不知道什麼意思。本文將深入剖析“_ =” 的含義、工作原理及其在實際編程中的廣泛應用,揭示其作為C#語法奇兵的重要角色。 一、下劃線 _:神秘的棄元符號 下劃線 _ 在C#中並非 ...