JavaScript自動化構建工具grunt、gulp、webpack介紹


前端開發自動化工作流工具,JavaScript自動化構建工具grunt、gulp、webpack介紹

前端自動化,這樣的一個名詞聽起來非常的有吸引力,向往力。當今時代,前端工程師需要維護的代碼變得及為龐大和復雜,代碼維護、打包、發布等流程也變得極為繁瑣,同時浪費的時間和精力也越來越多,當然人為的錯誤也隨着流程的增加而增加了更多的出錯率。致使每一個團隊都希望有一種工具,能幫助整個團隊在開發中能精簡流程、提高效率、減少錯誤率。隨之討論自動化部署也越來越多,並且國內很多大型團隊也都有自己成熟的自動化部署工具。據我所知,百度有FIS,騰訊有Modjs,360有燕尾服,還有很多團隊在使用Ant,Shell等。

--------------------------------

Grunt: JavaScript世界的構建工具 -- Grunt中文網
http://www.gruntjs.net/
grunt是一套前端自動化工具,一個基於nodeJs的命令行工具,一般用於:壓縮文件,合並文件,簡單語法檢查。
GRUNT JavaScript 世界的構建工具
為何要用構建工具?
一句話:自動化。對於需要反復重復的任務,例如壓縮(minification)、編譯、單元測試、linting等,自動化工具可以減輕你的勞動,簡化你的工作。當你在 Gruntfile 文件正確配置好了任務,任務運行器就會自動幫你或你的小組完成大部分無聊的工作。
為什么要使用Grunt?
Grunt生態系統非常龐大,並且一直在增長。由於擁有數量龐大的插件可供選擇,因此,你可以利用Grunt自動完成任何事,並且花費最少的代價。如果找不到你所需要的插件,那就自己動手創造一個Grunt插件,然后將其發布到npm上吧。
先看看入門文檔:http://www.gruntjs.net/getting-started 吧。

可用的Grunt插件
你所需要的大多數task都已經作為Grunt插件被開發了出來,並且每天都有更多的插件誕生。插件列表頁面列出了完整的清單。
Grunt和 Grunt 插件是通過 npm 安裝並管理的,npm是 Node.js 的包管理器。
提前感受一下 Grunt 吧!
安裝 grunt 雖然很簡單,更多涉及到如何運行項目。看看下面的演示,這是為項目案例運行 grunt 后的輸出。

---------------------------------
gulp.js - 基於流的自動化構建工具。 | gulp.js 中文網
http://www.gulpjs.com.cn/
用自動化構建工具增強你的工作流程!
易於使用
通過代碼優於配置的策略,Gulp 讓簡單的任務簡單,復雜的任務可管理。
構建快速
利用 Node.js 流的威力,你可以快速構建項目並減少頻繁的 IO 操作。
插件高質
Gulp 嚴格的插件指南確保插件如你期望的那樣簡潔高質得工作。
易於學習
通過最少的 API,掌握 Gulp 毫不費力,構建工作盡在掌握:如同一系列流管道。

--------------------------------
介紹 | Webpack 中文指南
http://webpackdoc.com/
Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分隔,等到實際需要的時候再異步加載。通過 loader 的轉換,任何形式的資源都可以視作模塊,比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。

--------------------------------
上面工具都依賴nodejs的命令,所以首先需要安裝nodeJS環境,現在windows安裝nodeJS直接下載即可:

https://nodejs.org/en/

Index of /download/release/latest/win-x64/
https://nodejs.org/download/release/latest/win-x64/
根據需要下載,下載完成后直接下一步下一步完成,就具有nodeJS環境了

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM