gulp前端自動化構建工具(一) 工具介紹和使用

2021-07-23 11:42:21 字數 905 閱讀 8151

功能概要:

本工具基礎gulp自動化工具構建,可適用於整個前端開發時間線,使用時較簡單,在配置完後輸入自定義命令即可使用本工具。功能如下

開發環節:

構建環節:

支援命令選擇requriejs(amd)、seajs(cmd)、webpack 模式之一進行js打包

構建時可選擇性構成普通版本或壓縮版本(md5戳)之一

構建時自動替換html文件中資源引用域,含dom節點的style屬性引入的以及懶載入的資源域替換

構建壓縮版時自動將html文件中引入的靜態資源檔案進行混淆合併,輸出md5命名的單個壓縮資源檔案,並改寫html引用路徑

構建壓縮版時自動將css資源中引入的進行合併sprite化,也可對進行base64化

可自定義配置生產版本的目錄名

測試環節:

工具目錄結構:

工具使用命令:

/* help命令 */

gulp.task('help', function() );

gulp前端自動化構建工具

gulp是基於node.js的乙個構建工具 自動任務執行器 開發者可以使用它自動化工作流程。一些常見的 重複的任務,例如 網頁自動重新整理 css預處理 檢測 壓縮 等,只需要簡單的命令就能全部完成。使用它可以簡化工作,提高開發效率。gulp優點 簡潔 gulp側重 優於配置 最直觀的感受,更為簡單...

Gulp前端自動化構建工具的應用

gulp前端自動化構建工具的應用 1.引言 實際前端開發不再僅僅是靜態頁面的開發了,豐富的前端技術讓前端的 邏輯越來越複雜,模組化開發和各類框架也增加了在生產環境中部署開發環境 的難度,這種情況下,前端自動化構建在前端開發中尤為重要。我們會遇到下面的問題 a.每次修改了html js css等檔案,...

自動化構建工具gulp入門(二)

外掛程式官網 gulp sass 開發環境下書寫 sass 或 less 函式式的書寫自己的樣式是一種很好的開發體驗,但我們最終仍需將sass或less編譯轉化為css檔案引入。gulp sass可以幫助我們完成這部分的工作。npm install gulp sass外掛程式安裝後在gulpfile...