Prepros for Mac 前端编译与开发工具详解

Prepros 是一款功能强大、界面直观的现代化前端开发工具，专为简化网页开发流程而设计。它能够自动编译 Less、Sass、Scss、Stylus、CoffeeScript、TypeScript 等多种预处理语言，并集成了实时浏览器刷新、文件优化、跨设备测试等核心功能。对于 Mac 用户而言，Prepros 提供了原生般的流畅体验，极大地提升了前端开发的效率与舒适度。

一、核心界面与工作区详解

启动 Prepros 后，主界面主要分为四个逻辑清晰的功能区域：

1. 项目侧边栏（左侧）： 以树状结构展示所有已添加的项目及其内部文件。您可以在此管理项目、添加或删除文件/文件夹。
2. 文件操作面板（中央）： 当在侧边栏选中一个文件（如 .scss 文件）时，中央面板会显示该文件的详细处理选项。这是配置编译规则的核心区域，包括：
   • 输出路径设置： 指定编译后文件的生成位置。
   • 编译器选项： 选择 Sass、Less 等引擎及其版本，设置输出格式（压缩、展开等）。
   • 自动添加前缀： 配置 Autoprefixer，为 CSS 属性添加浏览器厂商前缀。
   • 源映射（Source Map）生成： 方便在浏览器开发者工具中调试预处理前的源代码。
3. 实时预览与设备测试栏（顶部/底部）： 包含一个本地服务器地址（如 http://localhost:7000）和二维码。点击地址可在默认浏览器打开项目，扫描二维码可在局域网内的移动设备上实时预览，并同步交互与样式更改。
4. 全局工具栏与状态栏： 顶部工具栏提供“添加项目”、“全局设置”、“最小化到菜单栏”等操作。底部状态栏显示编译任务状态、错误或成功信息。

二、完整工作流程：从项目创建到导出

1. 创建/打开项目

步骤：

1. 启动 Prepros。
2. 点击顶部工具栏的 “+” 按钮，或使用快捷键 Command + N。
3. 在弹出的 Finder 窗口中，选择您的项目根文件夹（通常包含 index.html、css/、js/ 等目录），然后点击“打开”。

项目将立即出现在左侧侧边栏，Prepros 会自动扫描并识别项目中的可编译文件（如 .scss, .less）。

2. 配置文件编译选项

步骤：

1. 在左侧项目侧边栏，点击展开您的项目树。
2. 找到需要处理的文件，例如一个 styles.scss 文件，并单击选中它。
3. 中央面板将显示该文件的配置选项。关键配置包括：
   • 输出路径： 通常设置为类似 ../css/styles.css，表示编译后的 CSS 文件输出到上一级目录的 css 文件夹中。
   • 编译器： 从下拉菜单中选择正确的编译器（如 LibSass）。
   • 输出样式： 选择“压缩”以减小文件体积，或“展开”以便于阅读。
   • 启用 Autoprefixer： 勾选该选项，并在下方输入需要支持的浏览器范围（如 `> 1%, last 2 versions`）。
   • 生成源映射： 建议在开发阶段勾选“启用源映射”。
4. 配置更改会自动保存。首次配置后，文件会立即被编译一次。

3. 实时开发与预览

步骤：

1. 确保项目中的 index.html 文件已被 Prepros 识别（通常会自动列为项目首页）。
2. 在顶部预览栏，点击显示的本地服务器 URL（如 http://localhost:7000），或使用快捷键 Command + P，将在默认浏览器中打开项目页面。
3. 此时，实时刷新（Live Reload） 功能默认启用。当您保存任何项目中的 HTML、CSS、JS 或预处理文件时，所有已打开的预览页面将自动刷新以显示最新更改。
4. 如需在手机或平板上测试，点击预览栏的二维码图标，使用设备摄像头扫描二维码即可。

4. 项目构建与导出

在开发完成后，通常需要生成一个优化后的生产版本。

步骤：

1. 在左侧项目侧边栏，右键单击您的项目名称。
2. 从上下文菜单中选择 “处理项目” 或直接点击顶部工具栏的“处理”图标（两个箭头组成的圆形）。
3. Prepros 将按照每个文件的配置，一次性编译所有文件，并应用压缩、前缀添加等优化。
4. 要导出整个处理后的项目，右键单击项目名称，选择 “导出项目”。
5. 在弹出窗口中，选择导出目录，Prepros 会将所有源文件和处理后的文件复制到该位置，生成一个干净的、可直接部署的版本。

三、常用功能进阶技巧

1. 自定义 Browsersync 选项： 在项目设置中，可以进入“服务器”选项卡，调整实时刷新的端口号、禁用特定文件的刷新，甚至设置代理以处理动态网站（如 PHP 项目）。
2. 忽略文件与文件夹： 在项目设置中，通过“高级”选项卡添加 `.gitignore` 风格的忽略规则，防止 Prepros 处理 `node_modules` 等无关目录，提升性能。
3. 多项目并行管理： Prepros 支持同时添加和管理多个项目。通过侧边栏顶部的下拉菜单或直接点击不同项目名称，可以快速切换上下文。
4. 菜单栏快速操作： 在 Prepros 设置中启用“在菜单栏显示图标”，即可在不打开主窗口的情况下，从菜单栏快速启用/禁用实时刷新、查看编译状态或打开项目。
5. 使用外部配置文件： 对于高级用户，可以在项目根目录创建 `.prepros` 配置文件，以代码形式定义编译规则，便于团队共享和版本控制。

四、常见问题与解决方案

• 问题：文件编译失败，提示“引擎错误”或“未找到命令”。

  解决方案： 检查中央面板的“编译器”选项是否选择了正确的引擎。对于 Sass，确保系统已安装或 Prepros 内置的 LibSass 可用。尝试切换到另一个编译器版本或引擎。

• 问题：CSS 自动前缀（Autoprefixer）未生效。

  解决方案： 首先确认在文件配置面板中已勾选“自动添加前缀”选项。其次，检查下方的“浏览器”输入框内的查询语句是否正确（可参考 browserslist 文档）。最后，尝试重新处理文件。

• 问题：实时刷新（Live Reload）功能不工作。

  解决方案： 1) 确保预览页面是通过 Prepros 提供的本地服务器地址（而非直接使用 `file://` 协议）打开的。2) 检查项目设置中的“实时刷新”选项是否被禁用。3) 某些浏览器扩展可能会干扰，尝试在无痕模式下测试。

• 问题：移动设备无法通过二维码访问。

  解决方案： 确保移动设备与 Mac 处于同一局域网（Wi-Fi）下。检查 Mac 的防火墙设置是否阻止了 Prepros 的本地服务器端口（默认为 7000）。

五、Prepros for Mac 快捷键汇总表