AEM Brackets扩展

概述

AEM Brackets扩展提供了一个顺畅的工作流，用于编辑AEM组件和客户端库，并利用Brackets代码编辑器的功能，该编辑器允许从代码编辑器中访问Photoshop文件和层。 扩展提供的轻松同步（不需要Maven或File Vault）提高了开发人员的效率，并且还帮助了解有限AEM的前端开发人员参与项目。 此扩展还为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版本。

扩展

要安装扩展，请按如下步骤继续操作：

  1. 打开括号。 在菜单​File​中，选择​Extension Manager…

  2. 在搜索栏中输入​AEM​并查找​AEM Brackets Extension。

    chlimage_1-54

  3. 单击​安装。

  4. 安装完成后，关闭对话框和Extension Manager。

入门

内容包项目

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

项目必须至少包含：

  1. jcr_root文件夹(例如，myproject/jcr_root)

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

在“括号”的​文件​菜单中，选择​打开文件夹…… ，然后选择jcr_root文件夹或父项目文件夹。

注意

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

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

项目设置

要将内容同步到AEM开发实例和从开发实例同步内容，您需要定义项目设置。 可以通过转到​AEM​菜单并选择​项目设置……​来完成此操作

chlimage_1-55

项目设置允许定义：

  1. 服务器URL(例如http://localhost:4502)
  2. 是否容忍没有有效HTTPS证书的服务器（如果需要，请取消选中）
  3. 用于同步内容的用户名(例如，admin)
  4. 用户的密码(例如admin)

正在同步内容

AEM Brackets扩展为filter.xml中定义的筛选规则所允许的文件和文件夹提供了以下类型的内容同步：

自动同步已更改的文件

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

手动双向同步

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

chlimage_1-56

注意

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

完全内容包同步

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

chlimage_1-57

同步状态

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

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

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

chlimage_1-58

注意

无论使用何种同步方法，都只会同步被filter.xml的筛选规则中标记为包含的内容。

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

编辑HTL代码

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

属性自动完成

  1. 在HTML属性中，键入sly。 该属性已自动完成到data-sly-。
  2. 在下拉列表中选择HTL属性。

表达式自动完成

在表达式${}中，将自动填写常用变量名称。

更多信息

AEM Brackets扩展是一个开源项目，由Adobe Marketing Cloud组织在GitHub上根据Apache许可证版本2.0托管：

Brackets代码编辑器也是一个开源项目，由Adobe Systems Incorporated组织在GitHub上托管：

请随时投稿！

在此页面上