Web前端开发环境搭建
最近在学习前端开发，通过网上的查找资料和自身实践；完成了前端开发环境的简单搭建。但发现网上提供的搭建方法总有些不全，因此把自己的搭建过程分享一下，希望能为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，显示如下一长串：
These are common Git commands used in various situations:
表示你成功安装了。
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文件，内容如下：
并保存；
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文件并在文件中输入如下内容：
完成以上后需要验证下文件夹使用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;
Web前端开发环境搭建相关推荐
- 使用Grunt搭建自动化的web前端开发环境-完整教程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! AD: jQuery在使用grunt,bootstrap在使用grunt, ...
- Grunt搭建自动化web前端开发环境--完整流程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...
- 【Yeoman】热部署web前端开发环境
本文来自 "简时空":<[Yeoman]热部署web前端开发环境>(自动同步导入到博客园) 1.序言 记得去年的暑假看RequireJS的时候,曾少不更事般地惊为前端利 ...
- Linner和WebStorm前端开发环境搭建
Linner和WebStorm前端开发环境搭建 注意: 1. Jdk1.6以上 2. 数据库推荐用MySQL 以下是前端工厂开发环境搭建,主要用到Lin ...
- dashboard windows 前端开发环境搭建
dashboard是kubernetes的云管平台UI界面,正常情况下,其是在linux下开发的,但是,有些特殊情况下,我们也可能希望在windows上搭建起dashboard的开发环境 这里我们将搭 ...
- 创建 Web 前端开发环境(node和npm)
Web 前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础. 本文介绍的工具有:NodeJS, NPM, Bower, Git 和 Grunt. ...
- 前端开发环境搭建（工具使用）
迅雷 用于之后下载一些安装包,速度较快 命令行工具 shift + 鼠标右键:在此处打开powershell node + 文件名: 在node中执行文件 输入部分文件名 + Tab: 自动补全文件名 ...
- linux环境 前端开发环境搭建,Linux运维知识之linux 前端环境搭建
本文主要向大家介绍了Linux运维知识之linux 前端环境搭建,通过具体的内容向大家展现,希望对大家学习Linux运维知识有所帮助. 1.下载node.js 2.在linux 里使用wget命令 w ...
- grunt 前端开发环境搭建
1.找管理员开通gitlab权限 2.下载并安装git工具 3.下载并安装nodejs 4.安装cnpm 5.安装kulor-cli cnpm install -g kulor-cli cnpm in ...
最新文章
- python 多个变量赋值
- sklearn基本回归方法
- 产品所有者也应该是Scrum教练吗？
- java11+osgi_错误学习：Java + OSGi
- matlab 刻度非均匀控制,MATLAB 出一张好看的图
- oracle 10g SQL* Plus主机字符串
- java 调度框架_java调度框架Quartz（一）
- Spark灰度发布在十万级节点上的实践
- Vue2.0 之 自带浏览器里无法打开（兼容IE处理） - 解决方案 命令
- HDU2553 N皇后问题【DFS＋回溯法】
- 局域网ftp工具，主要用于局域网简单的ftp上传和下载
- 代码对比工具，就用这7个！
- LibEvent中文帮助文档--第1、2、3、4章
- php怎么黑admin管理员密码是什么,tplink管理员密码是什么？
- windows命令行下schtasks创建定期任务
- 几种排序算法的稳定性分析
- 微信硬件平台wifi设备通信第一篇
- 你最期待的热门思维导图测评在这里！
- nvcc和nvidia-smi显示的版本不一致？
- JS实现鼠标经过和离开图片放大缩小效果