適用grunt的注意點 應用Grunt自動化地優化你的項目前端

0、使用grunt能夠爲前端開發省去不少工做量，與git版本控制器配合起來不要太完美，通常也都是這麼用的；

一、先安裝node.js，下載軟件安裝就好了，通常自帶npm管理器;

二、經過npm安裝grunt-cli，安裝命令：npm install -g grunt-cli；g表明在全局環境下安裝，cli表明的是命令行的意思；

     也就是把「grunt」這個詞添加到全局命令行中，至關於在window環境下注冊了grunt命令，所以在別的文件環境下輸入grunt命令是有效的;

     在命令行中輸入grunt，驗證是否安裝成功；

三、經過命令行進入將要開發的網站目錄，輸入命令：npm install grunt --save-dev，注意這是在局部環境安裝的grunt插件；

     也就是讓這個本地項目依賴grunt，查看package.json文件中的devdependencies對象，就多了「grunt」：「版本號」這幾個字符;

　　其實grunt也就是一個插件，它的功能就是用來管理其餘的插件！全部的插件都是基於node環境的；

四、安裝本地項目所需的其餘依賴項（模塊、插件），命令與安裝grunt相似：npm install grunt-contrib-uglify --save-dev;

     查看package.json文件，又多了一個依賴項；

五、接下來就是配置--Gruntfile.js這個文件了，這個文件做用主要就是規定：在本地項目環境下，輸入grunt命令時，電腦該如何操做文件；

     好比：壓縮、合併、檢查語法錯誤、把sass文件編譯爲css文件等等；之前這些都須要手工操做，如今只要輸入grunt，就搞定了！

六、Gruntfile.js要符合node環境下模塊化規範的寫法，module.export = function(grunt){// 一些相關的配置}，主要是進行三方面的配置；

     1）配置每一個插件的具體操做過程，如操做項目文件夾的哪些文件，輸入輸出等等；

     2）加載依賴項，loadNpmTask——就是上面經過npm install 的插件；

     3）指明grunt命令要執行哪幾個操做；

     

參考：

     【前端福利】用grunt搭建自動化的web前端開發環境-完整教程 

     Grunt 新手一日入門

     應用Grunt自動化地優化你的項目前端