打造前端 Deepin Linux 工作环境——配置静态服务器

打造前端 Deepin Linux 工作环境——配置静态服务器

我们前面虽然已经安装了一个 xampp 的集成服务器环境，但是这个东西实在是太重了。一般情况下，我们写个css或者 js 居然要跑那个东西我实在是优点受不了。所以呢，我这一篇博文呢，就来讲一下，我们如何搞几个静态的服务器。

Python 静态服务器

其实 python 的服务器功能还是蛮强大的，但是对于我们前端工程师来说，还是把它当成一个简单的静态 http 服务器就好。

好，首先我们打开终端工具，在里面输入

python

看能否启动 python 环境，如下图所示：

好，我们可以看到 跑的版本是是 python 2.7.13 也就是 python 2 了。

python 2 的启动 httpserver 的命令是：

python -m SimpleHTTPServer

我们到前面配置 xampp 的时候随便写的一个 html 文件目录中执行这个命令，如下图所示：

然后我们在浏览器里面输入： http://127.0.0.1:8000/，就可以看到如下图所示的结果了。

这个命令还是有点太长了。我们把这个命令缩短一点，还是用前面的章节中说的方法，在命令行中执行下面的命令：

echo 'alias pyhttp="python -m SimpleHTTPServer"' >> ~/.bash_profile && . ~/.bash_profile

执行完成之后，我们就可以用 pyhttp 这个我们自定义的一个缩写的命令来启动 pyhttp 静态 http 服务了。

如果想要换个端口来启动服务，则命令就是

pyhttp 4000

这样就可以了。

如果你安装的是 phthon 3 那么命令就不是 python -m SimpleHTTPServer 而是要改成 python -m http.server 效果是一样的。

全局安装 nodejs 的 http-server 服务

有上面的那一个方法就可以哈，这里是作为一个补充。nodejs 有一个 http-server 的http服务包，全局安装之后，也可以启动一个 http 服务。

安装命令如下：

sudo npm install http-server -g

安装完成之后，我们就可以使用 http-server 命令来启动一个 http 服务了。

// 启动一个http服务 默认端口 8080
http-server
// 指定一个端口启动
http-server -p 9000

运行结果如下图所示：

这个命令不算太长，但是你和我一样还是喜欢短的，不需要进行缩短，因为它已经给了一个默认的缩短的了。

// 启动一个http服务 默认端口 8080
hs
// 指定一个端口启动
hs -p 9000

这我就不放图了。

安装 Browsersync 服务

前面的两个静态服务器都是不会自己刷新的，我们为了提高效率，会搞一个自动刷新的 http 服务，然后我们边写代码，浏览器里就自动刷新，这样就可以大大提高我们的效率了。这个我以前的博文中也有推荐过，大家可以看详情：https://cloud.tencent.com/developer/article/1015542

那边是说的 mac 系统，其实和 linux 是一样一样的。所以详情去我那篇博文看，我这里只说安装命令和命令缩短命令。

安装 Browsersync

sudo npm install -g browser-sync

具体怎么使用，看我上面的连接，我把最常用的，缩短成bshttp：

// 编辑配置文件
vim ~/.bash_profile
// 给文件末尾添加
alias bshttp='browser-sync start --server --files "**/*.css, **/*.html"'
//:wq 保存退出
// 使配置文件生效
. ~/.bash_profile

小结

python 一般系统都自带，所以直接用它的没什么不好的。http-server 是 nodejs 的一个服务包，喜欢就安装，不喜欢也无所谓。最后一个是 Browsersync 强烈推荐安装。具体怎么使用，请查看 效率工具 Browsersync ，文件保存浏览器自动刷新