Grunt項目構建-插件學習

據說過Grunt也有兩年了,用了也有兩年了,然而都是在別人搭好的架子上作開發,當想要對前端工程化總體把控時就一臉懵逼了!javascript

Grunt是什麼?css

Grunt是一套web前端工程化構建工具。(ps:關於Grunt的好處及安裝網上教程一大堆,這裏就不熬述了)前端

爲何說Grunt是一『套』工具呢,由於它提供了豐富的官方插件和第三方插件供開發者使用,開發者可根據項目需求靈活引用適合的插件,從而實現前端工程自動化的總體構建。java

Grunt和Grunt插件都基於nodeJs環境運行,Grunt的插件是基於npm來管理。這裏仍是不講安裝,只針對如今所作的項目中涉及到的Grunt插件作功能簡單介紹,對一個完整工程都須要哪些Grunt插件作初印象的概述。node

1.babel-preset-es2015webpack

功能:將es6|es2015規範的語法轉化爲es5規範。es6

 

2.body-parserweb

功能:body-parser進行post參數的解析,最經常使用的是其中的json和urlencoded的parser,可分別對以JSON格式的post參數和urlencoeded的post參數進行解析,都可得到一個JSON化的req.body。數據庫

 

3.expressexpress

功能:一個基於node平臺的開發框架。

Web應用:Express 是一個基於 Node.js 平臺的極簡、靈活的 web 應用開發框架,它提供一系列強大的特性,幫助你建立各類 Web 和移動設備應用。

API:豐富的 HTTP 快捷方法和任意排列組合的 Connect 中間件,讓你建立健壯、友好的 API 變得既快速又簡單。

性能:Express 不對 Node.js 已有的特性進行二次抽象,咱們只是在它之上擴展了 Web 應用所需的基本功能。

 

4.grunt

功能:Web前端工程化構建的主體。

 

5.grunt-autoprefixer

功能:解析CSS文件而且添加瀏覽器前綴到CSS規則裏,Autoprefixer使用一個數據庫根據當前瀏覽器的普及度以及屬性支持提供給你前綴。

 

6.grunt-babel

功能:能夠在項目中使用下一代規範編寫js代碼,babel會幫你自動轉換成當代瀏覽器支持的js規範代碼。

 

7.grunt-cli

功能:grunt的命令行接口。

 

8.grunt-concurrent

功能:併發執行多個任務,能夠顯著改善多個負責任務構建的耗時。

 

9.grunt-connect-proxy

功能:解決開發時的跨域問題,由於開發是先後分離的模式,前端調用後端接口時不在一個服務器會產生跨域問題,但又不能採用JsonP和CORS的方式解決,由於項目發佈上線後就是同域了,因此proxy提供了一個HTTP代理中間件實現鏈接。

 

10.grunt-contrib-clean

功能:作清潔工做,否則會殘留不少沒有用的文件。

 

11.grunt-contrib-connect

功能:在本地模擬一個web server。用來充當一個靜態文件服務器,自己集成了livereload功能 。

 

12.grunt-contrib-copy

功能:複製文件和文件夾。

 

13.grunt-contrib-cssmin

功能:css壓縮合並。

 

14.grunt-contrib-jshint

功能:jshint用於javascript代碼檢查(並會給出建議),發佈js代碼前執行jshint任務,能夠避免出現一些低級語法問題。

 

15.grunt-contrib-less

功能:將less編譯成css。

 

16.grunt-contrib-requirejs

功能:合併requireJS管理的文件

 

17.grunt-contrib-stylus

功能:將stylus編譯成css。

 

18.grunt-contrib-uglify

功能:js代碼壓縮

 

19.grunt-contrib-watch

功能:預先設定一個監放任務,用來監控文件的修改|增長|刪除,而後自動運行grunt任務,省去一遍遍手動執行Grunt命令。

 

20.grunt-newer

功能:是一個優化構建的插件,作到文件更改後,增量更新,而不是對全部的文件去執行任務task。做用是處理上方watch的毛病,讓watch在監聽到某個文件變更時,僅僅對變更的文件進行事務處理。

 

21.grunt-replace

功能:保持原有目錄結構去替換文件。

 

22.grunt-rev

功能:就是 files 裏的指定的文件都會被修改文件名,文件名前加入 md5 字符串。

 

23.grunt-svgmin

功能:壓縮svg。

 

24.jshint-stylish

功能:高亮標記JsHint的檢查結果。

 

25.load-grunt-tasks

功能:它會自動讀取並加載項目 packge.json 文件中 devDependencies 配置下以grunt-* 開頭的依賴庫。免去手寫N多個loadNpmTasks繁瑣工做。

 

26.time-grunt

功能:可用來顯示每個任務所花的時間和百分比。

 

花了半天時間將如今項目中用到的Grunt插件列出,對每一個插件完成的工做有了一個初印象,每一個插件的具體使用方法還獲得官網https://www.npmjs.com/查閱具體示例,插件間的協同工做還須要本身在實踐中學習和摸索,也以爲現有的構建尚有可完善的空間,路漫漫好好學習吧!gulp和webpack還沒整過吶!😂

相關文章
相關標籤/搜索