搭建前端开发环境

 最近在学习前端开发，通过网上的查找资料和自身实践；完成了前端开发环境的简单搭建。但发现网上提供的搭建方法总有些不全，因此把自己的搭建过程分享一下，希望能为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 ] [-c name=value]
[–exec-path[= ]] [–html-path] [–man-path] [–info-path]
[-p | --paginate | --no-pager] [–no-replace-objects] [–bare]
[–git-dir= ] [–work-tree= ] [–namespace=]
[]
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 ’ or 'git help ’
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中直接引用就可以了。

以上只是简单的对搭建的流程进行了介绍，对于很多插件的使用等都没有介绍，也没有深入的去讨论，只是一个引导。