前端工程化grunt

 

一、grunt是什麼？

grunt是基於nodejs的前端構建工具。grunt用於解決前端開發的工程問題。

二、安裝nodejs

Grunt和全部grunt插件都是基於nodejs來運行的。

安裝了nodejs以後，能夠在你的控制檯中輸入「node -v」來查看nodejs的版本，也順便試驗nodejs是否安裝成功。

注意：第一，grunt依賴於nodejs的v0.8.0及以上版本；第二，奇數版本號的版本被認爲是不穩定的開發版，不過從官網上下載下來的應該都是偶數的穩定版。

三、安裝grunt-CLI

安裝前提：電腦聯網

「CLI」被翻譯爲「命令行」，要想使用grunt，首先必須將grunt-cli安裝到全局環境中，使用nodejs的「npm install…」進行安裝。

先簡單介紹一下npm：

      官網：https://npmjs.org

      Npm是一個NodeJS包管理和分發工具，他提供了nodejs插件的依賴管理。

     如今npm已經集成在nodejs的安裝包，不須要單獨安裝了。

     經常使用npm命令：

      npm install xxx 安裝模塊

      npm install xxx -g 將模塊安裝到全局環境中

     npm ls 查看安裝的模塊及依賴

     npm ls -g 查看全局安裝的模塊及依賴

     npm uninstall xxx  (-g) 卸載模塊

     npm cache clean 清理緩存

 

安裝grunt-CLI過程

windows系統下使用管理員權限打開控制檯。輸入：

           

注意：mac os系統、部分linux系統中，須要在這句話以前加上「sudo」。

回車，命令行會出現一個轉動的小橫線，表示正在聯網加載。加載的時間看你網速的快慢，不過這個軟件比較小，通常加載時間不會很長，稍一下子，就加載完了。你會看到如下界面。

          

 

二、驗證一下grunt-cli是否安裝完成並生效，只須要繼續在命令行中輸入「grunt」命令便可。若是生效，則會出現如下結果：           

          

   反正出現這個，就證實安裝成功了

             

四、建立一個簡單的網站

Grunt是應用於實際項目的，因此咱們得有一個簡單的測試網站來演示grunt的安裝、使用

首先，我在電腦E盤建立了一個文件夾：grunt_test。裏面建了三個空文件夾、兩個空文檔，名稱以下圖。（注意 Gruntfile.js 文件的首字母大寫！）

            

先把package.json這個文件寫一些東西。記住，既然文件後綴名叫「json」，那麼文件中的格式確定是嚴格的json格式。內容以下：

簡單把這個網站或系統的名稱、版本寫了一下。

devDependencies字面意思解釋是「開發依賴項」，即咱們如今這個系統，將會依賴於哪些工具來開發。先寫一個空對象。下文再慢慢把它填充起來。

 

五、安裝grunt

接下來會有一系列插件的安裝，他們的安裝過程和grunt同樣。可是他們的執行都是基於grunt的，所以才能把grunt叫作一個「構建工具」。Grunt沒有具體的做用，可是它能把有具體做用的一個一個插件組合起來，造成一個總體效應。

基於grunt構建的前端工程能作不少事情，常見的有： 文件壓縮，文件合併，less文件編譯，sass文件編譯，coffeeScript文件的編譯等。例如，你須要檢查js語法錯誤，而後再去壓縮js代碼。若是這兩步你都去手動操做，會耗費不少成本。Grunt就能讓你省去這些手動操做的成本。

一、進入E:\grunt_test目錄下輸入。

      

--save-dev的意思是，在當前目錄安裝grunt的同時，順便把grunt保存爲這個目錄的開發依賴項。

上面的devDependencies對應的就是空對象。運行這行命令後，你會看到幾條warning提示，不用管它。而後接下來就是加載狀態，一個旋轉的小橫線。稍等待一下子，會提示你安裝成功。

因爲網太慢，我就直接使用淘寶鏡像來安裝了，用cnpm代替npm； 

        

打開package.json，「devDependencies」發生了變化。

        

文件夾中多了一個「node_modules」文件夾

        

控制檯運行grunt命令會獲得一個warning提示。

       

 這樣就說明grunt已經起做用，安裝成功了。

爲什麼咱們在剛纔執行grunt時候會有Warning提示呢？

根據提示，咱們得知的信息是：Task 「default」 not found ，下面會解決這個問題。

 

 

六、配置Gruntfile.js

Gruntfile.js 這個文件，確定是爲了grunt作某種配置的。按照grunt的規定，咱們首先把Gruntfile.js配置成以下格式。

     

保存，在控制檯再次運行grunt命令

     

注意Gruntfile.js中的一句話：

     

這句話是在Gruntfile.js中獲取package.json中的內容。在上文配置package.json時咱們說 過：package.json中的內容不光是用來佔位置的，還能夠在其餘地方獲取。這裏已經獲取，如何使用在下文。

 

七、Grunt插件介紹

進入grunt官網的插件列表頁面 http://www.gruntjs.net/plugins ，咱們能看到grunt到目前位置的全部插件。如今裏面有4560個插件，這個數量天天都在增長。並且，這些既然出如今官網，確定是通過審覈的。

插件分爲兩類。第一類是grunt團隊貢獻的插件，這些插件的名字前面都帶有「contrib-」前綴，並且在插件列表中有星號標註。第二類是第三方提供的插件，不帶有這兩個特徵。

 

我把前幾名插件的做用簡單描述一下

• Contrib-jshint——javascript語法錯誤檢查；

• Contrib-watch——實時監控文件變化、調用相應的任務從新執行；

• Contrib-clean——清空文件、文件夾；

• Contrib-uglify——壓縮javascript代碼

• Contrib-copy——複製文件、文件夾

• Contrib-concat——合併多個文件的代碼到一個文件中

• karma——前端自動化測試工具

 

以上這些插件，不會所有講到。

可是隨着講解其中的一部分，我想你就能掌握使用grunt插件的方法。

知道方法了，而後你就能夠參考官方文檔去使用你想要的插件。

 

 

八、使用uglify插件

Uglify插件的功能就是壓縮javascript代碼。

要安裝一個插件，你首先要進入這個插件在grunt官網的說明文檔頁面。咱們在grunt官網插件列表頁面，找到「contrib-uglify」點擊進入。

安裝uglify插件的方式，和安裝grunt是同樣的。

運行這句命令。安裝完成以後，你會看到 package.json中「devDependencies」節點的變化，以及「node_modules」文件夾裏的變化。

 

既然要使用uglify來壓縮javascript代碼，固然得建立一個js文件來作實驗。咱們在現有的「src」文件夾中新建一個「test.js」

          

測試文件創建好了。咱們接下來就要把這個js文件進行壓縮。

若是要壓縮，須要在Gruntfile.js中配置。分爲三步：

第一步，在grunt.initConfig方法中配置 uglify 的配置參數。以下圖：

 

         

 注意：true後面是逗號。

上圖中，對uglify的配置有兩項。

「options」中規定容許生成的壓縮文件帶banner，即在生成的壓縮文件第一行加一句話說明。注意，其中使用到了pkg獲取package.json的內容。

「build」中配置了源文件和目標文件。即規定了要壓縮誰？壓縮以後會生成誰？注意，咱們這裏將目標文件的文件名經過pkg的name和version來命名。

 

第二步，在 grunt.initConfig 方法以後，要讓grunt去加載這一個插件。

         

 

 

第三步，在grunt命令執行時，要不要當即執行uglify插件？若是要，就寫上，不然不寫。

        

 

在控制檯輸入grunt

       

生成一個壓縮後的js文件

       

 

 

 

九、使用jshint插件（檢查js語法錯誤）

 

 插件的安裝和安裝grunt、uglify沒有任何差異，這裏再也不贅述了。直接執行下面的命令

  

 

配置jshint和配置uglify同樣。在配置uglify時候咱們講到了三個步驟，這裏也是三個步驟。

 

第一步，在grunt.initConfig方法中配置jshint。

 

               

和uglify的配置同樣，分爲「options」和「build」兩個部分。

「build」中描述了jshint要檢查哪些js文檔的語法。

「options」中描述了要經過怎麼的規則檢查語法，這些規則的描述文件就保存在網站根目錄下的一個叫作「.jshintrc」的文件中。

所以咱們在網 站的根目錄下面添加上這個文檔，而且填寫上文件內容。

               

 

第二步，加載插件。和uglify的加載方法同樣。注意，這裏沒有前後順序。

              

 

 

 

第三步，配置grunt命令啓動時，要執行的任務，這裏注意前後順序，最好是先檢查語法

             

以上三步配置完了以後，咱們能夠測試一下這個jshint到底怎麼用。這裏我故意將當前建立的test.js文件寫一個語法錯誤。

             

 

在控制檯輸入grunt檢查

            

 

jshint錯誤以後呢，其後面的uglify就沒有再繼續執行。咱們修改完這些錯誤，在此執行grunt命令，結果沒有提示錯誤，並且jshint和uglify都順利執行了。

          

 

 

10. 使用csslint插件（檢查css語法錯誤）

檢查css文件的語法錯誤要使用csslint插件，其安裝配置方法和jshint幾乎如出一轍。

只不過csslint依賴於一個叫作「.csslintrc」的文件做爲語法檢驗的規則，個人「.csslintrc」文件以下。其餘內容咱們就不在此贅述了。

          

 

11. 使用watch插件（真正實現自動化）

 

首先安裝watch插件。

   

接下來要配置watch插件，配置分爲三個步驟

配置watch將監控哪些文件的變化，以及這些文件一旦變化，要當即執行哪些插件功能。

以下圖，watch將監控src文件夾下全部js文件和css文件的變化，一旦變化，則當即執行jshint和uglify兩個插件功能。

      

這三步執行完了，即watch插件配置完成。

運行grunt命令，控制檯提示watch已經開始監聽。此時要想中止，按ctrl + c便可。

     

     

 

既然在監聽，咱們試一試看監聽有沒有效。咱們將 test.js 代碼中去掉一個分號，看它可否自動檢查出來這個錯誤。

     

 

結果顯示，watch檢查到了test.js文件的變化，並且經過執行jshint提示了語法錯誤。

更重要的是，它如今還在監聽、並未中止。

說明它正在等着你去修改錯誤，從新監聽檢查。再把語法錯誤修復了。看它會如何處理。

     

它檢測到了文件變化，此次語法沒有錯誤，它很順利的執行了jshint和uglify，執行完畢以後從新進行監聽。

 

 

12. 上文中所謂的「build」

 

上文中描述各個插件的配置時，都是用了「build」這一名稱做爲一個配置項。

        

那麼這裏是否是必須用「build」這一個名字？

答案很明顯，固然不是。

這裏能夠用任何字符串代替「build」（但要符合js語法規則）。

甚至，你能夠把「build」指向的內容分開來寫。

這樣對多人協同開發很友好。好的設計就是這樣：讓用戶盡情發揮他們的自由來幹事，而不是去限制他們。

 

13. 批量安裝插件

在E盤創建一個新的文件夾grunt_test_1，

將grunt_test中的package.json複製粘貼到文件夾grunt_test_1中

再在打開命令行跳轉到「grunt_test_1」，執行「cnpm install」命令

在「grunt_test_1」生成了「node_modules」文件夾，裏面安裝好了package.json中「devDependencies」配置的插件。並且，版本都是一直的。

           

 

         

最後說一下系統文件結構，這是我所學到的我以爲應該注意的

src文件夾裏面存儲的是原始的代碼文件

dist文件夾裏面存儲的是最終生成的代碼文件

demo裏面存儲的是一些測試頁面