开发环境

开发环境搭建

这学期学习Java web，这学期开学第一节课老师叫我们自己把前端开发环境搭建好！现代前端的开发几乎都离不开nodejs。通过网上的查找资料和自身实践；完成了前端开发环境的简单搭建。但发现网上提供的搭建方法总有些不全，因此把自己的搭建过程分享一下，希望能为web开发其他的朋友提供帮助，少走弯路。搭建的环境主要安装如下插件：Nodejs + grunt + bower + express + supervisor；关于这些插件等的功能这里不详细介绍了，基本是前端开发必备的。

进入搭建环节：

1.上nodejs官网下载并安装node，

2.根据自己的电脑系统下载正确的安装包进行安装，安装时可以不用安装到c盘，选择D盘文件夹或者F盘都可以，而且nodejs安装后会自动将安装路径添加到系统环境变量，省去手动添加麻烦。

3.安装后可以验证下nodejs是否成功安装；windows+R，输入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下载，。

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文件夹。还发现文件夹下多了个文件夹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;