最近在學(xué)習(xí)前端開發(fā)，通過(guò)網(wǎng)上的查找資料和自身實(shí)踐；完成了前端開發(fā)環(huán)境的簡(jiǎn)單搭建。但發(fā)現(xiàn)網(wǎng)上提供的搭建方法總有些不全，因此把自己的搭建過(guò)程分享一下，希望能為web開發(fā)入門者提供幫助，少走彎路。

搭建的環(huán)境主要安裝如下插件：Nodejs+grunt+bower+express+supervisor；關(guān)于這些插件等的功能這里不詳細(xì)介紹了，大家可以網(wǎng)上百度，基本是前端開發(fā)必備的。

少說(shuō)廢話，進(jìn)入搭建環(huán)節(jié)：

1.上nodejs官網(wǎng)下載并安裝node，如果不行可以從淘寶鏡像下載nodejs，網(wǎng)站為：https://npm.taobao.org/；

2.根據(jù)自己的電腦系統(tǒng)下載正確的安裝包進(jìn)行安裝，安裝時(shí)可以不用安裝到c盤，選擇d盤文件夾都可以，而且nodejs安裝后會(huì)自動(dòng)將安裝路徑添加到系統(tǒng)環(huán)境變量，省去手動(dòng)添加麻煩。

3.安裝后可以驗(yàn)證下nodejs是否成功安裝；進(jìn)入運(yùn)行，輸入cmd，在里面輸入node -v 按回車；如果正確安裝，將會(huì)輸出你安裝的版本。

4.開始安裝grunt：可以在開始菜單menu中的node.js文件加下打開nodejs command，在其中輸入npm install -g grunt cli;將下載并安裝grunt。其中的-g是安裝到全局的意思。

5.安裝完成后，需要驗(yàn)證下grunt釋放正確安裝?？梢栽赾md中輸入：grunt；提下一下

以上說(shuō)明grunt安裝成功。

6.安裝好grunt后，就可以安裝插件了；最重要的包管理插件bower；在cmd中輸入： npm install bower -g進(jìn)行全局安裝。安裝完成后可以驗(yàn)證一下，在cmd中輸入：bower -v；輸入當(dāng)前安裝的版本表示成功安裝。

7.使用bower下載插件等是需要git的，所以需要安裝git；可以到git官網(wǎng)Git 官網(wǎng)地址：http://www.git-scm.com下載，不能安裝就只好翻墻了。我當(dāng)時(shí)是在csdn中找了個(gè)舊版本安裝的，只要能使用就可以，具體什么版本并不重要。安裝后最好驗(yàn)證一下：在cmd中輸入git，顯示如下一長(zhǎng)串：

usage: git [--version] [--help] [-C <path>] [-c name=value] [--exec-path[=<path>]] [--html-path] [--man-path] [--info-path] [-p | --paginate | --no-pager] [--no-replace-objects] [--bare] [--git-dir=<path>] [--work-tree=<path>] [--namespace=<name>] <command> [<args>]

These are common Git commands used in various situations:

start a working area (see also: git help tutorial) clone Clone a repository into a new directory init Create an empty Git repository or reinitialize an existing> 表示你成功安裝了。

8.安裝express，在cmd中輸入：npm express -gd; -g代表安裝到NODE_PATH的lib里面，而-d代表把相依性套件也一起安裝。如果沒(méi)有-g的話會(huì)安裝目前所在的目錄。

安裝完成后驗(yàn)證下：在cmd中輸入：express -v；如果沒(méi)有輸入出版本號(hào)，可能有如下原因：①在第二步安裝node是沒(méi)有添加環(huán)境變量，這種情況把node添加的環(huán)境變量即可解決。②express 4.x版本中將命令工具分出來(lái)了，需要再安裝一個(gè)命令工具，執(zhí)行命令“npm install -g express-generator”。

9.安裝supervisor：在cmd中輸入:npm install -g supervisor;安裝完后如果有工程是已經(jīng)配置好了，可以直接啟動(dòng)服務(wù)。cmd中中切換到工程目錄下，直接輸入supervisor app.js就可以了。

在以上只是介紹了怎么安裝插件什么，下面怎么配置開發(fā)的工程，只有配置好了功能文件才可以使用安裝的插件并進(jìn)行后續(xù)的開發(fā)。以下的操作都在nodejs command prompt 中輸入命令，在cmd中有些指令是會(huì)執(zhí)行失敗的；但后續(xù)的bower安裝插件都可以在cmd中直接install。

10.grunt配置文件：在E盤建立WebWorkSpace文件夾，存放工程文件，創(chuàng)建一個(gè)package.json文件，內(nèi)容如下：

{ "name": "WebWorkSpace", "version": "1.0.0",

"devDependencies": {
} }

并保存；

11.項(xiàng)目中安裝grunt：在nodejs command prompt 中輸入 npm install grunt --save-dev;注意此時(shí)cmd要切換到工程文件夾下；如前面前面建立的WedWorkspace文件夾。執(zhí)行install后，悔出現(xiàn)如下顯示：

安裝完后可以看到packge.json文件中都了一行"grunt": "^1.0.1"；

還發(fā)現(xiàn)文件夾下多了個(gè)文件夾node_modules，其中有一個(gè)“grunt”文件夾，再其中有若干文檔。這里就是存儲(chǔ)grunt源文件的地方。

12.配置gruntfile.js：在webworkspace文件夾下執(zhí)行：npm install grunt-init -g；

如果之前沒(méi)有安裝git，可以創(chuàng)建gruntfile文件并在文件中輸入如下內(nèi)容：

//包裝函數(shù) module.exports = function(grunt){ //任務(wù)配置，所有插件信息 grunt.initConfig({ //獲取package.json信息 pkg:grunt.file.readJSON('package.json') }); grunt.registerTask('default',[]]); };

完成以上后需要驗(yàn)證下文件夾使用grunt是否成功;輸入指令：grunt；輸入Done表示成功；

13.bower初始化：在webworkspace文件夾下，cmd中輸入：bower init;輸入后，一直按回車鍵，但出現(xiàn)looks good,時(shí)，選擇yes;

可以看到幫助創(chuàng)建的 bower.json 配置文件。

14.supervisor啟動(dòng)路徑文件配置，在webworkspace文件夾中創(chuàng)建app.js文件，內(nèi)容如下：

var express = require('express')
var app = express()

app.get('/\**/', function (req, res) {
var fileName = req.params[0];

var options = {
root: __dirname,
dotfiles: 'deny',
headers: {
'x-timestamp': Date.now(),
'x-sent': true
}
};

console.log(fileName);
res.sendFile(fileName, options);
res.end;
})

app.listen(3000, () => console.log('Express Server Starts'));

15.啟動(dòng)服務(wù)：當(dāng)用supervisor app.js; 打印輸出express starts server時(shí)，表示啟動(dòng)成功；

當(dāng)出現(xiàn)錯(cuò)誤：module.js:340 throw err; ^ Error: Cannot find module 'express’ at...............

此時(shí)可能是有些插件什么的沒(méi)有安裝，可以如下嘗試解決：

在webworkspace目錄下：

cmd中輸入：

npm install express

npm install jade

我的電腦執(zhí)行以上命令后在啟動(dòng)服務(wù)后正常，應(yīng)該是安裝express的時(shí)候有些套件什么的沒(méi)有安裝。

16.基本開發(fā)環(huán)境搭建完成了，可以跑個(gè)html試試。

在webworkspace目錄中新建一個(gè)文件夾test，在text中新建test.html；使用web開發(fā)工具，這里我使用hbuilder進(jìn)行編輯；在里面輸入一行test；

保存后在瀏覽器中輸入：localhost:3000/text/test.html;按回車；這時(shí)就可以看到瀏覽器網(wǎng)頁(yè)中顯示test；

至此環(huán)境搭建測(cè)試完成，之后的可以可以在目錄中使用bower下載bootstrap、angular等等插件，bower會(huì)對(duì)所有的依賴包進(jìn)行管理。下載完成后在html中直接引用就可以了。

以上只是簡(jiǎn)單的對(duì)搭建的流程進(jìn)行了介紹，對(duì)于很多插件的使用等都沒(méi)有介紹，也沒(méi)有深入的去討論，只是一個(gè)引導(dǎo)。

在創(chuàng)建環(huán)境中，主要參考了以下內(nèi)容：

1.創(chuàng)建web前端開發(fā)，http://www.cnblogs.com/haogj/p/4780982.html；

2.grunt搭建自動(dòng)化的web前端-完整教材：http://www.cnblogs.com/wangfupeng1988/p/4561993.html;