最近在学习前端开发，通过网上的查找资料和自身实践；完成了前端开发环境的简单搭建。但发现网上提供的搭建方法总有些不全，因此把自己的搭建过程分享一下，希望能为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> 表示你成功安装了。

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;