Question

我正在使用gulp-aemsync插件将我的css和js更改同步到AEM实例上的clientlib。有一个gulp任务看js和css运行gulp-aemsync罚款（当我刷新时，网站上的更改），但有点懒，因为我很高兴得到实时重新加载工作，所以我从来没有工作时手动刷新页面。

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

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

免责声明：此答案基于我在某个时候工作的设置，绝不是一个完整/可行的答案。但它应该为你提供一个替代现有的其他工具，并让你在那里一半。

我没有使用您提到的工具，但由于您使用的是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上）或者你确定不会超出本地（或dev / prod）的<script>标签，你可以设置一个websocket监听器来刷新页面： / p>

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

1 个答案: