Prepros 是一款面向前端的图形化编译工具，支持 Sass、Less、Stylus 等 css 预处理语言。在实际项目中，如果不调整默认设置，编译往往会做很多无用功。下面介绍几种用 Prepros 优化 css 编译流程的实用方法。
一、开启增量编译减少重复工作
Prepros 默认在保存文件时会重新编译当前项目相关的预处理文件。你可以在项目设置中勾选仅编译修改文件，这样工具会对比依赖关系，只处理真正变动的模块，避免每次都全量构建。
二、使用文件监听实现保存即编译
开启 Live Compile 后，Prepros 会在后台监听文件夹变化。你只需在编辑器里保存，css 就会自动生成，不需要手动去界面点编译按钮。
基础监听配置示例
// Prepros 配置文件中开启监听
{
"liveCompile": true,
"compileOnlyChanged": true,
"outputPath": "dist/css"
}
三、合并与压缩产出文件
在 Prepros 的任务面板里，可以把多个入口样式合并成一个文件，并启用压缩。这样浏览器请求数变少，线上加载更快。相关设置可通过界面勾选 Minify 与 Concatenate 完成。
| 功能 | 作用 |
|---|---|
| Minify | 删除空格注释，减小 css 体积 |
| Concatenate | 合并多个预处理结果到一个文件 |
| Autoprefixer | 自动补全浏览器前缀 |
四、用自定义任务串联处理链
Prepros 允许在编译后执行自定义命令，比如调用图片压缩或发送通知。你可以写一个简单脚本，在 css 编译完成后自动把资源同步到本地服务器目录。
编译后复制文件脚本
# 编译完成后将 css 复制到测试目录 cp dist/css/style.css /var/www/html/static/style.css echo "css 已更新"
五、避免常见性能坑
不要在项目里放太大的无关资源文件夹，否则 Prepros 扫描依赖时会变慢。另外，使用 @import 嵌套太深也会让编译图复杂，建议用模块化的 partial 文件加合并输出。
合理设置 Prepros，能让 css 预处理从手动繁琐变成后台自动流畅的一条线。
通过上述方式，Prepros 的编译流程会更聚焦变化内容，减少等待，也更容易和日常开发习惯结合起来。