Grunt基本使用-V1.0

淺語：grunt中文網：http://www.gruntjs.net/

 

第一步：Grunt 依賴 Node.js 因此在安裝以前確保你安裝了 Node.js。而後開始安裝 Grunt。

實際上，安裝的並非 Grunt，而是 Grunt-cli，也就是命令行的 Grunt，這樣你就可使用 grunt 命令來執行某個項目中的 Gruntfile.js 中定義的 task 。可是要注意，Grunt-cli 只是一個命令行工具，用來執行，而不是 Grunt 這個工具自己。

安裝 Grunt-cli 須要使用 NPM，使用下面一行便可在全局範圍安裝 Grunt-cli ，換句話說，就是你能夠在任何地方執行 grunt 命令：

　　npm install -g grunt-cli 

 

第二步：進入一個你建立的文件夾，執行npm init，生成package.json文件。

package.json應當放置於項目的根目錄中，與Gruntfile.js在同一目錄中>

 

第三步：安裝插件來執行咱們須要的命令：

    

• 合併文件：grunt-contrib-concat
• 語法檢查：grunt-contrib-jshint
• Scss 編譯：grunt-contrib-sass
• 壓縮文件：grunt-contrib-uglify
• 監聽文件變更：grunt-contrib-watch
• 創建本地服務器：grunt-contrib-connect

 

初始的文件夾：

 

初始的目錄狀態：package.json

 

安裝 grunt npm install grunt --save-dev

 **–save-dev 表示會把剛安裝的東西添加到 package.json 文件。

 

其餘的文件也是這樣的命令：

npm install grunt-contrib-jshint --save-dev

 

本身須要什麼插件能夠去github下載，有不少有趣的插件：

 

 

安裝完成後就能夠在json文件以來項目中看到了：

 

目錄結構：

 

 

第四步：查看grunt版本

grunt --version

 

第五步：建立Gruntfile.js文件，用來執行grunt咱們所須要的命令

文件格式：

 

第六步：

操做1：合併文件

合併js文件下的a.js與b.js 到一個新文件

 

Gruntfile.js內容：

 

運行：grunt concatjs

運行成功！

 

查看目錄文件：

生成aAndB.js；而且文件內容以"；"分隔；

 

操做二：壓縮，檢查文件

Gruntfile.js內容：

 

jshint檢查一直報錯！

 

由於中的第二行，一直缺乏一個分號！

去掉分號也是一直報錯，說當時合併文件的時候用來分隔的";"是不須要的！暈

 

去掉後，jshint就檢查對了。

 

查看目錄文件：

 

第七步：實際項目中就這樣？每次手動？固然不是！

grunt還有一個神器：watch!

操做一：監聽GruntDemo下的一個html文件,並添加監聽！

Gruntfile.js內容：

 

啓動監聽：

更改頁面：不斷更改頁面文件，並保存的時候。控制檯會連續打印。

 

操做二：監聽js文件改變，而且當改變後，進行jshint檢查與壓縮。

 

執行grunt watchJs

 

文檔目錄：

修改shop.js文件後，又執行檢查與壓縮的命令。

 

咱們也可使用時間來做爲戳。

 

第八步：上傳咱們的文件至github

 

先pull 

 

再push

 

查看github,已經上去了。大功告成！