AEM Brackets扩展

概述

AEM Brackets Extension提供了编辑AEM组件和客户端库的流畅工作流程，并利用Brackets代码编辑器的强大功能，该编辑器允许从代码编辑器中访问Photoshop文件和图层。扩展提供的轻松同步（无需Maven或File Vault）提高了开发人员效率，还帮助具有有限知识的前端开发人员参与项目。此扩展还提供对HTML模板语言(HTL)的一些支持，它消除了JSP的复杂性，使组件开发更简单、安全。

chlimage_1-53

功能

AEM Brackets扩展的主要功能有：

将更改的文件自动同步到AEM开发实例。
文件和文件夹的手动双向同步。
项目的完整内容包同步。
表达式和data-sly-*块语句的HTL代码完成。

此外，Brackets还为AEM字体端开发人员提供了许多有用的功能：

Photoshop文件支持从PSD文件提取信息，如图层、度量、颜色、字体、文本等。
PSD中的代码提示，以便在代码中轻松重复使用此提取的信息。
CSS预处理器支持，如LESS和SCSS。
还有数百个附加扩展，可满足更具体的需求。

安装

括号

AEM Brackets扩展支持Brackets 1.0或更高版本。

从brackets.io下载最新的Brackets版本。

扩展

要安装此扩展，请按照以下步骤继续：

打开括号。在菜单文件中，选择Extension Manager…
在搜索栏中输入AEM并查找AEM Brackets扩展。
单击安装。
安装完成后关闭对话框和Extension Manager。

入门

内容包项目

安装扩展后，您可以通过使用Brackets从文件系统打开一个内容包文件夹来开始AEM组件的开发。

项目必须至少包含：

jcr_root文件夹(例如，myproject/jcr_root
filter.xml文件(例如，myproject/META-INF/vault/filter.xml;有关filter.xml文件结构的详细信息，请参阅工作区过滤器定义。

在Brackets的文件菜单中，选择打开文件夹……并选择jcr_root文件夹或父项目文件夹。

注意

如果您没有包含内容包的项目，可以尝试HTL TodoMVC Example。在GitHub上，单击下载ZIP，在本地解压文件，然后按照上面的说明，在Brackets中打开jcr_root文件夹。然后按照以下步骤设置项目设置，最后按照完整内容包同步部分的进一步说明，通过执行导出内容包将整个包上传到AEM开发实例。

完成这些步骤后，您应能够访问AEM开发实例上的/content/todo.html URL，并可以开始对Brackets中的代码进行修改，并查看在Web浏览器中进行刷新后，如何将更改立即同步到AEM服务器。

项目设置

要同步与AEM开发实例之间的内容，您需要定义项目设置。这可以通过转到AEM菜单并选择项目设置……来完成

chlimage_1-55

项目设置允许定义：

服务器URL(例如，http://localhost:4502
是否允许没有有效HTTPS证书的服务器（不选中，除非需要）
用于同步内容的用户名(例如，admin
用户的口令(例如，admin

正在同步内容

AEM Brackets Extension为filter.xml中定义的过滤规则允许的文件和文件夹提供以下类型的内容同步：

已更改文件的自动同步

这将仅同步从Brackets到AEM实例的更改，但绝不会相反。

手动双向同步

在项目资源管理器中，通过右键单击任何文件或文件夹打开上下文菜单，可以访问导出到服务器或从服务器导入选项。

chlimage_1-56

注意

如果所选条目位于jcr_root文件夹之外，则禁用导出到服务器和从服务器导入上下文菜单条目。

完整内容包同步

在AEM菜单中，导出内容包或导入内容包选项允许将整个项目与服务器同步。

chlimage_1-57

同步状态

AEM Brackets Extension在Brackets窗口右侧的工具栏中显示一个通知图标，它指示上次同步的状态：

绿色——已成功同步所有文件
blue —— 同步操作正在进行
黄色——某些文件未同步
红色——未同步任何文件

单击通知图标将打开“同步状态”报告对话框，其中列表了每个同步文件的所有状态。

chlimage_1-58

注意

将只同步标记为filter.xml的筛选规则所包含的内容，而不管使用的同步方法。

此外，支持.vltignore文件，以排除与存储库同步的内容。

编辑HTL代码

AEM Brackets Extension还具有一些自动完成功能，可简化HTL属性和表达式的编写。

属性自动完成

在HTML属性中，键入sly。属性自动完成至data-sly-。
在下拉列表中选择HTL属性。

表达式自动完成

在表达式${}中，常用变量名称会自动完成。