grunt gulp的使用對比

2021-07-29 19:55:40 字數 1057 閱讀 9391

gulp-uglify

grunt-contrib-uglify

(2)gulp配置檔案只分為兩步:載入外掛程式,註冊並配置任務;而grunt則更加複雜:配置任務、載入外掛程式、註冊任務。

(3) gulp核心設計基於unix流的概念,通過管道連線,前者的輸出即後者的輸入。 這樣可以解決使用grunt的i/o過程中會產生一些中間態的臨時檔案的問題。因為一些任務需要生成臨時檔案,其它任務可能會基於這些臨時檔案再做處理並生成最終的構建後檔案。而使用gulp的優勢就是利用流的方式進行檔案的處理,通過管道將多個任務和操作連線起來,因此只有一次i/o的過程,流程更清晰,更純粹。這種設計可以使我們輕易在乙個任務中通過多個外掛程式完成一系列的工作。這樣體現出gulp乙個外掛程式只實現乙個功能的特性。比如下面的**,先將es6**翻譯成es5**,再進行重新命名,加「-es5」字尾。

gulp.task("es6", function () ))

.pipe(rename())

.pipe(gulp.dest("./project"));

});

npm install del // gulp可以使用npm第三方del模組

npm install grunt-contrib-clean // grunt需要使用grunt第三方模組

(5)編寫gulp的配置檔案更像編寫乙個nodejs模組,定義任務清晰明確。 grunt允許配置多工,即可以通過任意命名的「目標(target)」來定義多個配置。這使我在學習時經常搞混那個是配置的任務,哪個是外掛程式的配置。比如下面**:

grunt.initconfig(],

auto:}})

auto是我隨意起的名字用來配置子任務,如果你不熟悉uglify外掛程式的配置,很可能會把auto當做files這樣的配置項。

(5)使用gulp外掛程式使用方式比較統一不會像grunt外掛程式那麼混亂,所以更容易閱讀、維護;給我的乙個很直觀的感受是當我使用grunt外掛程式是,有時要看半天的文件。而gulp外掛程式的使用都非常簡單。

webpack與grunt gulp的不同

三者都是前端構建工具,grunt和gulp在早期比較流行,現在webpack相對來說比較主流,不過一些輕量化的任務還是會用gulp來處理,比如單獨打包css檔案等。grunt和gulp是基於任務和流 task stream 的。類似jquery,找到乙個 或一類 檔案,對其做一系列鏈式操作,更新流上...

webpack與grunt gulp 的不同

三者都是前端構建工具,grunt gulp 在早期比較流行,現在webpack相對來說比較主流,不過輕量化的任務還是會使用 gulp 處理,比如單獨打包css檔案等 grunt 和 gulp 是基於任務和流 task.stream 的。類似jquery,找到乙個或一類檔案,對其做一系列鏈式操作,更新...

關於register使用的對比

這是使用register的 include include include int main end clock duration double end start clocks per sec printf f seconds n duration getchar 執行結果為10.137000秒 ...