开篇:如果你还不知道Node.js是什么,那么你可以先看看这篇:Node.js 究竟是什么?或者任何关于它的介绍。
第一步:安装Node.js
在Node官网下载安装包进行安装(这里使用的是Windows环境)
安装完成后进入cmd输入"node+ender"测试是否安装成功
PS:两次ctrl+c退出node
第二步:安装全局支持包
仍然是在cmd中输入以下命令(注意:一定要退出node)
npm install express@3.26 -g //express是node中最常用的web框架,如果安装不了则更改镜像,命令:npm set registry http://registyr.npmjs.org
npm install nodemon -g //nodemon用于实时监听app.js文件
npm install grunt-cli -g //grunt是一款任务构建工具,可以使用它完成自动编译/压缩等工作
npm install bower -g //bower是一款页面引入文件管理工具
PS:npm是node的包管理器,使用它安装/卸载支持包非常方便
PS:安装完成后,均可以通过输入"包名称 - h"测试是否安装成功及查看使用帮助
第三步:创建Web项目
使用命令或手动在相应磁盘下创建用于放置项目的文件夹(cmd命令大全)
这里使用的是本机D盘下的apps文件夹
执行"express APPNAME"命令,进行项目创建(这里以TEST作为项目名称)
PS:public中是我们熟悉的images、javascript、CSS
PS:routes是路由文件
PS:views中视图文件,express默认使用的模板引擎是jade
第四步:完善项目架构
使用任意的文本编辑器打开package.json文件,可以看到:
项目中已经有了express和jade,但我们想要完成项目,这些还远远不够,
我们会需要像watch、less、copy等等这样的包来进行辅助
你可以像我一样直接把它们全部写入到这个文件里,像这样:
当然:你也可以根据自己的需要,一个个进行安装,但记得在你的npm命令中不需要再使用 -g 了
好了,现在执行"cd appname && npm install"命令
PS:很明显,它的意思是进入项目的同时检测package.json文件安装里面列举出的所有包
PS:这样是不是很省事儿,免去了一条条的npm install ...命令
好的,接下来,你需要创建一个"Gruntfile.js"文件放在package.json的同级目录下,
你可以把这里的代码拷贝,做一些相应的改动即可
它用于控制那些需要执行的包,比如它们:
第五步:规范化前端引入文件
前端总会因为各种原因,而需要引入一些文件支持
我们熟悉的就有jQuery、Bootstrap、html5shiv、respond...
这些文件愈多,当我们管理、更换版本时就愈不方便
这时,前面安装的bower就起到作用了,可以这么做:
在public文件夹下创建"bower.json"文件
它的写法就像这样:——代码你可以在bower官网首页找到
紧接着,再创建".bowerrc"文件控制它们的存放目录(比如放到当前目录的libs文件夹下)
里面写上这么一条就行:
好嘞,现在在该目录下执行"cd public && bower install"命令
原理还是那样:进入public的同时检测bower.json文件,下载所有列举的文件,放入.bowerrc文件指定的目录中
第六步:启动
使用cmd在app.js文件所在位置,执行"nodemon app.js"命令
这时,就可以在浏览器中输入 localhost:3000 来试试你的成果了
如果,你希望改动了某些文件(比如coffe、less等)后,会自动进行编译等操作,
那得再开启grunt的监听:
新开一个cmd,执行"grunt watch"命令,像这样:
PS:想要执行watch命令,一定要安装相应的包哦 ^_^
总结:在Node.js下搭建项目,难免会跟大量的包打交道,搞清楚它们的作用,按需使用。
作者:@zhnoah 出处:http://www.cnblogs.com/zhnoah/ 本文版权归本人和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。