Node.js+Express4+Nunjucks+supervisor安装使用小记

大家都很熟悉Node.js就不用作过多介绍了。

各个项目的首页:

Node.js: http://nodejs.org

Express: http://expressjs.com

Nunjucks: http://mozilla.github.io/nunjucks/

supervisor: https://github.com/isaacs/node-supervisor

其中,Nunjucks受Python的Jinja2模板启发发展而来,如果有使用Python的Django模板爱好者的话可以尝试Swig。

替换默认的Jade,是因为更喜欢这种不要强制缩进的风格,同时,Jade本身也很难写出

1 <div class="{% if loop.index == current_nav_index %}active{% endif %}">

这种一旦判断复杂就难受的代码,因为目标要求Web Page,不是Web App,所以也没有考虑类似AngularJS一类的方案。

supervisor用于监视js代码,一旦代码变化就可以自动重启服务进程,方便开发。

=================================================

1. 安装 Node.js

Linux/Mac下强烈推荐使用由rvm启发而来的nvm(https://github.com/creationix/nvm/),其他平台参见官方的安装指导。

2. 安装express

express 4.x以后的版本推荐使用express-generator组件:

npm install -g express-generator

安装完成后,可以使用

express myapp

新建myapp项目,也可以加上-c选项指定使用less等预处理引擎。

3. 安装nunjucks

进入myapp目录,先安装nunjucks作为依赖:

npm install nunjucks --save

因为我们已经不需要jade处理模板了,所以可以执行:

npm uninstall jade --save

卸载jade依赖。

安装完成后,需要通过修改app.js加载nunjucks。

在添加必要的

var nunjucks = require(‘nunjucks‘);

之后,需要在

var app = express();

之后添加

nunjucks.configure(‘views‘, {
    autoescape: true,
    express: app
});

并且将

app.set(‘view engine‘, ‘jade‘);

改成

app.set(‘view engine‘, ‘html‘);

即可以html的后缀名在views文件夹下放置nunjucks模板。

同时,原来的jade模板也需要相应修改成以下的样子:

layout.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <title>{{ title }}</title>
 5   <link rel="stylesheet" href="/stylesheets/style.css">
 6 </head>
 7 <body>
 8   {% block content %}{% endblock %}
 9 </body>
10 </html>

index.html

1 {% extends ‘layout.html‘ %}
2 
3 {% block content %}
4   <h1>{{ title }}<h1>
5   <p>Welcome to {{ title }}</p>
6 {% endblock %}

error.html

1 {% extends ‘layout.html‘ %}
2 
3 {% block content %}
4   <h1>{{ message }}<h1>
5   <h2>{{ error.status }}<h2>
6   <pre>{{ error.stack }}</pre>
7 {% endblock %}

4. 安装supervisor

npm install -g supervisor

安装完成之后,执行

npm install

在安装完express的全部依赖之后,就可以通过

supervisor ./bin/www

运行express服务器了。

 

PS:./bin/www文件中可以通过修改文件

app.set(‘port‘, process.env.PORT || 3000);

中的3000改变默认监听端口。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。