近來做了些微信公眾號程序開發，有些技術要點整理一下。

用grunt搭建自動化的web前端開發環境，必須保證電腦在聯網條件下操作。

（一）配置環境

1.安裝nodejs,Grunt和所有grunt插件都是基于nodejs來運行的,所以必須安裝nodejs

可以去?https://nodejs.org/?下載安裝文件，安裝運行即可。

安裝完畢后，打開終端，執行命令“node -v”來查看nodejs的版本，也順便試驗nodejs是否安裝成功。

2.安裝grunt-CLI，“CLI”為“命令行”。要想使用grunt，首先必須將grunt-cli安裝到全局環境中，使用nodejs的“npm install…”進行安裝。

以MAC系統為例，打開終端，輸入：$ ?sudo npm install -g grunt-cli?

注意，mac os 系統、部分linux系統中，這里要加上“sudo ”指令。

回車，命令行會出現一個轉動的小橫線，表示正在聯網加載。加載的時間看你網速的快慢，不過這個軟件比較小，一般加載時間不會很長，稍一會兒，就加載完了。你會看到以下界面。引用一張圖片，自己安裝的時候沒截圖：

驗證一下grunt-cli是否安裝完成并生效，你只需要繼續在命令行中輸入“grunt”命令即可。如果生效，則會出現以下結果：

出現如圖所示提示，證明安裝成功。

3.在電腦上創建一個文件夾，名為TestGrunt.

接下來我們會有一系列插件的安裝，他們的安裝過程和grunt一樣。但是他們的執行都是基于grunt的，因此才能把grunt叫做一個“構建工具”。Grunt沒有具體的作用，但是它能把有具體作用的一個一個插件組合起來，形成一個整體效應。

下面我們繼續安裝grunt不再是全局安裝了，需要在控制臺進入到網站或系統的具體目錄下。這里我們從終端進入$ cd /Users/mymac/Desktop/TestGrunt 目錄下。然后輸入以下命令。

$ npm install grunt --save --dev,回車，此時注意必須保證TestGrunt文件夾下包含兩個文件，GruntFlie.js和package.json文件，否則報錯。

你會看到幾條warning提示，不用管它。然后接下來就是加載狀態，一個旋轉的小橫線。稍等待一會兒，會提示你安裝成功。如下圖：

至此，我們可以打開我們創建的TestGrunt文件夾，可以看到里面多了一個文件夾“node_modules”

繼續在終端執行 $ grunt 命令。遇到一個錯誤，如下圖所示：

解決辦法：按照提示，依次執行命令 npm install? grunt-contrib-concat

“npm install grunt-contrib-concat”

"npm install grunt-contrib-clean"

"npm install grunt-contrib-copy"

"npm install grunt-contrib-uglify"

"npm install grunt-contrib-jshint"

"npm install grunt-contrib-htmlmin"

"npm install grunt-contrib-cssmin"

如圖所示：

一系列安裝完成以后，終端繼續輸入 grunt命令，運行結果如下圖：

至此，說明grunt已經在這個目錄下成功安裝。