开始之前

我先介绍几款工具,这几款工具会在接下来用到。他们会帮我们处理很多无聊的操作。

nodemon

http://nodemon.io/

Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Perfect for development.

简单的来说,当你在nodejs程序上做了一个修改后,如果你希望查看到运行的结果你要做以下事情。

  • 修改源文件

  • Ctrl + c 关掉之前运行的程序

  • 重新运行程序

  • 看到结果

如果你频繁的修改代码,那么这个过程会发生每天上千次,况且你还要在不同的窗口之间切来切去。真是浪费时间。

有了这个工具之后,他会帮你处理这些事情。

安装使用非常的简单。

# 安装命令
sudo npm install -g nodemon

# 用下面的命令代替 node index.js
nodemon index.js

看起很好。之后如果你处理了什么代码,他就会帮你进行上面的操作,省时省力。

gitignore

https://github.com/github/gitignore

这是一个gitignore模板集合项目。当然我们现在只需要其中的一个,但这个项目是一直都在更新的,所以很具有参考性。

这是nodejs项目的gitignore
https://github.com/github/gitignore/blob/master/Node.gitignore

下载下来,把他加到项目中的根目录中就可以了。如果不了解gitignore,可以参看下面的网址。
https://git-scm.com/docs/gitignore

Emmet

官网 http://emmet.io/

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow

其实我蛮惊讶的,其实很多人并不知道这个工具。他的功能看起来也很简单。

你只要输入。

ul>li*5

之后按Tab,内容就生成了。

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

当然他还有很多的高级功能,你可以上他的官网看看。每个示例都有演示,上手很快。

tree

用来打印目录结构的。同样可以用brew工具方便的安装好。

# 安装
➜ brew install tree

# 打印当前目录
➜ tree .
.
├── LICENSE
├── index.js
└── package.json

这样的工具我们后面会介绍很多。

接着写

我们接着扩展之前写的小程序,首先让我们先看看目前的目录结构(node_modules和.git省略掉)。

➜ tree -aI 'node_modules|.git'
.
├── LICENSE
├── index.js
└── package.json

0 directories, 3 files

之前只是返回了一个字符串到浏览器,这次我们将生成一个网页并发回到浏览器中。

# 创建index.html
touch views/index.html

放入以下内容。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>首页</title>
</head>
<body>
  <h1>Hi, limichange!</h1>
</body>
</html>

index.js中做一些修改。

// 引入模块
var path = require('path');

// 设置根目录返回的内容
app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname + '/views/index.html'));
});

我们再次访问浏览器。

clipboard.png

一切正常。

➜ tree -aI 'node_modules|.git'
.
├── .gitignore
├── LICENSE
├── index.js
├── package.json
└── views
    └── index.html

下次我们将加入模板引擎,生成动态的页面。


limichange
4.2k 声望74 粉丝

本人已经不再这里玩了,