在前端开发中，我们经常需要开启本地服务器来预览我们的网页项目，常见的有webpack-dev-server和gulp-connect等。而spm-server是一个强大的本地服务器，它支持合并和压缩静态资源（css/js），通过访问 http://127.0.0.1:8000/ 查看项目页面。
安装
安装方法：npm install spm-server -g
使用
基本用法
首先进入项目目录，即项目的根目录，打开终端，执行命令：
---------- -----
访问 http://127.0.0.1:8000/ 就可以看到项目页面了。
端口设置与静态资源合并
spm-server内置了默认的端口8000，如果需要更改端口号，则需要加参数-p，例如：
---------- ----- -- ----
默认情况下，spm-server会根据配置的路径，将css,js,img等静态资源分别合并为一个或多个文件，以减少http请求，可以加上参数--with-livereload来实现文件合并后自动刷新页面，例如：
---------- ----- -----------------
配置
spm-server支持定制配置，如果需要更个性化的配置，可以在项目根目录中创建spm-server.config.js文件，例如：
-------------- - -
----- -----
------------- --------
--------------- -----
------- ------
---------- ---------
------- --------------------------------
-------------------- ------------- ---- -
------ ---------------------------
-
--参数说明：
- port：端口号
- documentRoot：静态资源根路径
- withLivereload：是否需要自动刷新页面
- upload：是否启用上传服务
- comboType：静态资源合并类型
- ignore：不合并的文件正则表达式
- getInitDataFilePath：启用自定义初始数据，返回json文件路径
以上仅是一个简单的配置示例。如果要更加详细的配置，请参考官方文档。
实战案例
下面是一个实战案例，通过使用spm-server来实现合并和压缩静态资源。
项目结构：
--- --- - --- --------- - --- --------- --- -- - --- --- - - --- ------------- - --- ------ --- ---------- --- --------------------
目标：将css和js都合并为一个文件，以减少http请求。
实现：
- 进入项目目录，执行 spm-server start
- 在浏览器中访问 http://127.0.0.1:8000/ ，可以查看页面
- 在 spm-server.config.js 中启用静态资源合并，将comboType设为'js,css'，之后再启动spm-server
- 查看浏览器中network栏，可以看到只有一个css和一个js文件，而不是多个。
总结
spm-server功能强大，有许多个性化配置选项，可以有效地提高项目开发效率和优化性能。在实际开发中，可以根据需求灵活选用不同的组合操作来达到最佳效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006709c8ccae46eb111efba