如何让 AEM 6.3 Livereload clientlibs

Question

我正在使用 gulp-aemsync 插件将我的 css 和 js 更改同步到 AEM 实例上的 clientlib。 A 有一个 gulp 任务监视运行 gulp-aemsync 的 js 和 css（我刷新时网站上有更改），但像我一样有点懒惰很高兴实时重新加载工作，这样我就不必在工作时手动刷新页面。

我尝试遵循这两个在线指南：

https://adobe-consulting-services.github.io/acs-aem-tools/features/live-reload/index.html

https://www.cognifide.com/our-blogs/cq/up-and-running-with-livereload-in-adobe-aem6

遵循以下步骤：

正在 AEM 实例上安装 Netty 包
正在 AEM 实例上安装 ACS AEM 工具包
正在安装 RemoteLiveReload chrome 扩展（AEM 实例托管在 AWS 上）

那没有用，所以我让我们的一位 DevOps 工程师在 AEM 实例上打开端口 35729（这是 Livereload 的默认端口）。这仍然不起作用，当我单击 chrome 浏览器扩展程序进行同步时，我收到以下消息：

无法连接到 LiveReload 服务器。请确保 LiveReload 2.3（或更高版本）或其他兼容服务器是运行.

谁能帮我解决这个问题，因为我真的很想让它工作以简化我的工作流程。

谢谢

Answer 1

DISCLAIMER: This answer is based on a setup I had working at some point, and by no means is a complete/working answer. But it should give you an alternative to the other tools that exist and get you half way there.

我没有使用过你提到的工具，但由于你正在使用 gulp 和 aemsync，你可以执行以下操作：

在您的 gulp 设置中，创建一个 websocket 服务器，基本上让该服务器在每次触发 aemsync 以将内容推送到 AEM 时发布消息。

// start a websocket server
const WebSocket = require('ws'); // requires "npm install ws"
const wss = new WebSocket.Server({ port: 8081 });
const connections = [];
wss.on('connection', function connection(ws) {
  connections.push(ws); // keep track of all clients

  // send any new messages that come to this server, to all connected clients
  ws.on('message', (d) => connections.forEach(connection => connection.send(d)));
});

// create a new websocket to send messages to the websocket server above
const ws = new WebSocket('ws://localhost:8081');

// send a regex to the server every second
// NOTE: CHANGE this to run when aemsync is triggered in your build 
setInterval( () => ws.send('reload'), 1000 );

然后在您的 JS 代码（在 AEM 上）或真正在 <script> 标签中，确保不会超出您的本地（或 dev/prod），您可以设置一个 websocket 侦听器来刷新页面：

socket = new WebSocket('ws://localhost:8081');
socket.onopen  = // add function for when ws is open
socket.onclose  = // add function for when ws is closed
socket.onerror = // add function for when ws errors
// listen to messages and reload!
socket.addEventListener('message', function (event) {
  location.reload();
});

或者，您可以使用我开发的 chrome 插件： https://github.com/ahmed-musallam/websocket-refresh-chrome-ext

它无论如何都不完美。但是，对于基本设置，它应该工作得很好！而且您无需接触 AEM JS。

如何让 AEM 6.3 Livereload clientlibs

How to get AEM 6.3 to Livereload clientlibs

livereload

aem

gulp