This is a live redesign. If something looks broken, it probably is. Tell me?

AEM (CQ 5.6) Front-end Workflow for LESS updates

I've recently joined a project where all front-end work is done directy in the CQ trunk instead of using a stand-alone approach with Handlebars as I was used to. What surprised me is the need to deploy everything if you want to see your CSS (LESS) or JS changes applied to your locally served website. Especially if you're involved in mainly developing a new theme using a fixed set of existing components, it becomes important to be able to refresh and check your (visual) changes quickly and often.

The task#

What we need, then, is a quick way to update the static files without runing a mvn install every time.

Possible solutions#

I have heard about and tried to use the internal VCS of CQ (vault) for this, but apparently using both vault and svn (or any other external VCS) together will result in plenty of funky conflicts (I never got far enough to see any, though). The other issue is that I failed to get vlt running on my Windows machine in the way that I wanted.
The other way would be to develop with CRXDE but either I don't understand how that is meant to work or it really is a somewhat sub-optimal experience (I want to use my favourite IDE!).

My approach#

Here's what I came up with: I use a really simple Gulp task to

  • watch for changes in my LESS files
  • push the changed files to jcr_root with a curl command
  • refresh the local website using livereload with chrome plugin

Here's the repo: polarbirke/aem-gulp-workflow · GitHub

I'd love to hear your feedback about this — did I miss something obvious? Should we work on a Grunt plugin? Does it even work for you at all?

Post a comment If you post a tweet with a link to this page, it will appear here as a webmention (updated hourly).

Webmentions

No mentions yet.