最近在學習前端開發，通過網上的查詢資料和自身實踐；完成了前端開發環境的簡單搭建。但發現網上提供的搭建方法總有些不全，因此把自己的搭建過程分享一下，希望能為web開發入門者提供幫助，少走彎路。

  搭建的環境主要安裝如下外掛：Nodejs+grunt+bower+express+supervisor；關於這些外掛等的功能這裡不詳細介紹了，大家可以網上百度，基本是前端開發必備的。

  少說廢話，進入搭建環節：

  1.上nodejs官網下載並安裝node，如果不行可以從淘寶映象下載nodejs，網站為：https://npm.taobao.org/；

  2.根據自己的電腦系統下載正確的安裝包進行安裝，安裝時可以不用安裝到c盤，選擇d盤資料夾都可以，而且nodejs安裝後會自動將安裝路徑新增到系統環境變數，省去手動新增麻煩。

  3.安裝後可以驗證下nodejs是否成功安裝；進入執行，輸入cmd，在裡面輸入node -v 按回車；如果正確安裝，將會輸出你安裝的版本。

  4.開始安裝grunt：可以在開始選單menu中的node.js檔案加下開啟nodejs command，在其中輸入npm install -g grunt cli;將下載並安裝grunt。其中的-g是安裝到全域性的意思。

5.安裝完成後，需要驗證下grunt釋放正確安裝。可以在cmd中輸入：grunt；提下一下

          

         以上說明grunt安裝成功。

6.安裝好grunt後，就可以安裝外掛了；最重要的包管理外掛bower；在cmd中輸入： npm install bower -g進行全域性安裝。安裝完成後可以驗證一下，在cmd中輸入：bower -v；輸入當前安裝的版本表示成功安裝。

 7.使用bower下載外掛等是需要git的，所以需要安裝git；可以到git官網Git 官網地址：http://www.git-scm.com下載，不能安裝就只好翻牆了。我當時是在csdn中找了箇舊版本安裝的，只要能使用就可以，具體什麼版本並不重要。安裝後最好驗證一下：在cmd中輸入git，顯示如下一長串：

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 one work on the current change (see also: git help everyday) add Add file contents to the index mv Move or rename a file, a directory, or a symlink reset Reset current HEAD to the specified state rm Remove files from the working tree and from the index examine the history and state (see also: git help revisions) bisect Find by binary search the change that introduced a bug grep Print lines matching a pattern log Show commit logs show Show various types of objects status Show the working tree status grow, mark and tweak your common history branch List, create, or delete branches checkout Switch branches or restore working tree files commit Record changes to the repository diff Show changes between commits, commit and working tree, etc merge Join two or more development histories together rebase Forward-port local commits to the updated upstream head tag Create, list, delete or verify a tag object signed with GPG collaborate (see also: git help workflows) fetch Download objects and refs from another repository pull Fetch from and integrate with another repository or a local branch push Update remote refs along with associated objects 'git help -a' and 'git help -g' list available subcommands and some concept guides. See 'git help <command>' or 'git help <concept>' to read about a specific subcommand or concept.

         表示你成功安裝了。

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

   安裝完成後驗證下：在cmd中輸入：express -v；如果沒有輸入出版本號，可能有如下原因：①在第二步安裝node是沒有新增環境變數，這種情況把node新增的環境變數即可解決。②express 4.x版本中將命令工具分出來了，需要再安裝一個命令工具，執行命令“npm install -g express-generator”。

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

  在以上只是介紹了怎麼安裝外掛什麼，下面怎麼配置開發的工程，只有配置好了功能檔案才可以使用安裝的外掛並進行後續的開發。以下的操作都在nodejs command prompt 中輸入命令，在cmd中有些指令是會執行失敗的；但後續的bower安裝外掛都可以在cmd中直接install。

  10.grunt配置檔案：在E盤建立WebWorkSpace資料夾，存放工程檔案，建立一個package.json檔案，內容如下：

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

並儲存；

11.專案中安裝grunt：在nodejs command prompt 中輸入 npm install grunt --save-dev;注意此時cmd要切換到工程資料夾下；如前面前面建立的WedWorkspace資料夾。執行install後，悔出現如下顯示：

     

       安裝完後可以看到packge.json檔案中都了一行"grunt": "^1.0.1"；

       還發現資料夾下多了個資料夾node_modules，其中有一個“grunt”資料夾，再其中有若干文件。這裡就是儲存grunt原始檔的地方。

12.配置gruntfile.js：在webworkspace資料夾下執行：npm install grunt-init -g；

  如果之前沒有安裝git，可以建立gruntfile檔案並在檔案中輸入如下內容：

//包裝函式 module.exports = function(grunt){ //任務配置，所有外掛資訊 grunt.initConfig({ //獲取package.json資訊 pkg:grunt.file.readJSON('package.json') }); grunt.registerTask('default',[]]); };      完成以上後需要驗證下資料夾使用grunt是否成功;輸入指令：grunt；輸入Done表示成功；

13.bower初始化：在webworkspace資料夾下，cmd中輸入：bower init;輸入後，一直按回車鍵，但出現looks good,時，選擇yes;

     

可以看到幫助建立的 bower.json 配置檔案。

14.supervisor啟動路徑檔案配置，在webworkspace資料夾中建立app.js檔案，內容如下：

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.啟動服務：當用supervisor app.js; 列印輸出express starts server時，表示啟動成功；

   當出現錯誤：module.js:340 throw err; ^ Error: Cannot find module 'express’ at...............

   此時可能是有些外掛什麼的沒有安裝，可以如下嘗試解決：

      在webworkspace目錄下：

cmd中輸入：

npm install express

 npm install jade

我的電腦執行以上命令後在啟動服務後正常，應該是安裝express的時候有些套件什麼的沒有安裝。

  16.基本開發環境搭建完成了，可以跑個html試試。

    在webworkspace目錄中新建一個資料夾test，在text中新建test.html；使用web開發工具，這裡我使用hbuilder進行編輯；在裡面輸入一行test；

    儲存後在瀏覽器中輸入：localhost:3000/text/test.html;按回車；這時就可以看到瀏覽器網頁中顯示test；

  至此環境搭建測試完成，之後的可以可以在目錄中使用bower下載bootstrap、angular等等外掛，bower會對所有的依賴包進行管理。下載完成後在html中直接引用就可以了。

  以上只是簡單的對搭建的流程進行了介紹，對於很多外掛的使用等都沒有介紹，也沒有深入的去討論，只是一個引導。

 在建立環境中，主要參考了以下內容：

 1.建立web前端開發，http://www.cnblogs.com/haogj/p/4780982.html；

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