近來做了些微信公眾號(hào)程序開發(fā)，有些技術(shù)要點(diǎn)整理一下。

用grunt搭建自動(dòng)化的web前端開發(fā)環(huán)境，必須保證電腦在聯(lián)網(wǎng)條件下操作。

（一）配置環(huán)境

1.安裝nodejs,Grunt和所有g(shù)runt插件都是基于nodejs來運(yùn)行的,所以必須安裝nodejs

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

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

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

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

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

回車，命令行會(huì)出現(xiàn)一個(gè)轉(zhuǎn)動(dòng)的小橫線，表示正在聯(lián)網(wǎng)加載。加載的時(shí)間看你網(wǎng)速的快慢，不過這個(gè)軟件比較小，一般加載時(shí)間不會(huì)很長(zhǎng)，稍一會(huì)兒，就加載完了。你會(huì)看到以下界面。引用一張圖片，自己安裝的時(shí)候沒截圖：

驗(yàn)證一下grunt-cli是否安裝完成并生效，你只需要繼續(xù)在命令行中輸入“grunt”命令即可。如果生效，則會(huì)出現(xiàn)以下結(jié)果：

出現(xiàn)如圖所示提示，證明安裝成功。

3.在電腦上創(chuàng)建一個(gè)文件夾，名為TestGrunt.

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

下面我們繼續(xù)安裝grunt不再是全局安裝了，需要在控制臺(tái)進(jìn)入到網(wǎng)站或系統(tǒng)的具體目錄下。這里我們從終端進(jìn)入$ cd /Users/mymac/Desktop/TestGrunt 目錄下。然后輸入以下命令。

$ npm install grunt --save --dev,回車，此時(shí)注意必須保證TestGrunt文件夾下包含兩個(gè)文件，GruntFlie.js和package.json文件，否則報(bào)錯(cuò)。

你會(huì)看到幾條warning提示，不用管它。然后接下來就是加載狀態(tài)，一個(gè)旋轉(zhuǎn)的小橫線。稍等待一會(huì)兒，會(huì)提示你安裝成功。如下圖：

至此，我們可以打開我們創(chuàng)建的TestGrunt文件夾，可以看到里面多了一個(gè)文件夾“node_modules”

繼續(xù)在終端執(zhí)行 $ grunt 命令。遇到一個(gè)錯(cuò)誤，如下圖所示：

解決辦法：按照提示，依次執(zhí)行命令 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"

如圖所示：

一系列安裝完成以后，終端繼續(xù)輸入 grunt命令，運(yùn)行結(jié)果如下圖：

至此，說明grunt已經(jīng)在這個(gè)目錄下成功安裝。