在前端开发中，处理静态资源（如图片、js、css等）是必不可少的工作。而处理静态资源时使用 npm 包 staticy 可大大减轻我们的工作量。本文将为大家详细介绍 staticy 的使用方法和一些注意事项。
什么是 staticy？
Staticy 是一个基于 Node.js 的静态文件服务器。它可以将本地文件夹映射到网址上，并且支持浏览器自动刷新，让我们在开发过程中更加方便快捷。此外，它还支持多种缓存策略，并且可以对文件进行 Gzip 压缩。
安装
首先，我们需要先安装 Node.js 和 npm。然后在命令行中执行如下命令：
npm install -g staticy
这条命令会全局安装 staticy，使其可以在任何位置被调用。
使用
在命令行中执行以下命令开启 staticy 服务器：
staticy [path]
其中，path 是要映射到网址上的本地文件夹路径，可以省略不填，默认为当前文件夹。
配置项
除了基本的使用方法之外，staticy 还提供了许多配置项，可以通过命令行参数进行设置。以下是一些常用的配置项：
-p, --port <number>服务器端口号，默认为 4000--open开启浏览器访问时自动打开网页--index index.html指定默认的首页文件名--cors启用 CORS 支持--no-cache禁用缓存--etag启用 ETag 支持--last-modified启用 Last-Modified 支持--expires <seconds>设置缓存过期时间--gzip启用 Gzip 压缩支持
比如，我们可以加上 -p 8888 --open --no-cache 三个参数来启动一个监听端口为 8888、自动打开浏览器、禁用缓存的 staticy 服务器：
staticy [path] -p 8888 --open --no-cache
自动刷新
在开发过程中，我们修改了代码后需要手动刷新浏览器才能查看修改后的效果，这样有时会浪费很多时间。而 staticy 可以通过 WebSocket 实现页面的自动刷新。只需在 HTML 页面中添加以下这一行：
<script src="//localhost:4000/livereload.js"></script>
当代码发生改变时，WebSocket 会将消息推送到客户端，从而完成自动刷新。
缓存策略
staticy 支持多种缓存策略，可以通过命令行参数进行设置。
ETag
ETag 是一种可以标记文件版本的机制。当客户端请求文件时，服务器会将文件的 ETag 值返回给客户端，在后续的请求中客户端将该值发送给服务器。服务器通过比对 ETag 值来判断文件是否被修改。
我们可以通过 --etag 参数来启用 ETag 缓存：
staticy [path] --etag
Last-Modified
Last-Modified 是一种标记文件最后修改时间的机制。当客户端请求文件时，服务器会将文件的最后修改时间返回给客户端，在后续的请求中客户端将该值发送给服务器。服务器通过比对最后修改时间来判断文件是否被修改。
我们可以通过 --last-modified 参数来启用 Last-Modified 缓存：
staticy [path] --last-modified
Expires
Expires 是一种可以设置文件缓存过期时间的机制。我们可以通过 --expires <seconds> 参数来设置缓存过期时间，单位为秒：
staticy [path] --expires 3600
相关命令
我们可以通过以下命令查看当前 staticy 服务器中所有的缓存信息：
staticy cache list
或者清除某个或所有缓存信息：
staticy cache clear [--prefix <prefix>]
其中，--prefix 参数可以用来指定清除以某个前缀开头的缓存。
示例代码
下面是一个使用 staticy 的实例代码：
# 安装 staticy npm install -g staticy # 进入项目目录 cd my-project # 启动服务器 staticy . -p 8888
在浏览器打开 http://localhost:8888/ 即可访问项目文件。
总结
staticy 是一个很方便的静态文件服务器，可以节省开发中处理静态文件的时间。同时，它还支持多种缓存策略，可以很好地优化网站性能。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568b881e8991b448e4855