Automate the creation of component and clientlibs in AEM/CQ5

While working for a client, i got a requirement. The requirement was simple they had front end team which was producing angular apps and i had to use the developed app and create an AEM component with clientlibs automatically with all the editing capabilities liked dialog etc. For anyone who isn’t aware about angular app, angular apps are one page apps and they use Angular JS. So for most part except header and footer nothing is going to be shared among all the apps that the front end devs were producing.

The solution that i devised was to use grunt. Grunt has several apis for file manipulation, json iteration etc. While creating the dialogs, i asked the front end devs to provide me a json which i then iterated and successfully produced the dialog.xml.

I also used the js and css that front end produced to produce the clientlib and js.tx and css.txt file. This was all done using grunt. Finally, they also produced html which i had to then parse and convert into sightly compatible html file.

The process took a while to deliver but now there is no upfront cost to the client in terms of having a AEM developer. The front guys can get the component produced by executing just a command.

The implementation was client specific but can help someone in developing something along the lines if there is any such need.

How to Use Jquery with Grunt

I have recently started working with Grunt, i loathed it first but it has many varied uses and i seem to have started liking it.

I was recently working on a requirement where i had to create a AEM component automatically with dialogs and clientlibs. More on this later, in a later post. While implementing the requirement, i wanted to use Jquery on grunt for some dom manipulation.

Here is how you do it.

var doc = jsdom(grunt.file.read(//path to html file));
var window = doc.parentWindow;
var $ = require(‘jquery’)(window);
var bodyText¬†= $(“body”).html();

So, simple. I was reading Stackoverflow and came across fs.readFile and fs.readSyncFile which are async and sync functions but they were not simply working and hence i had to use grunt.file.read function.