How to build AEM clientlibs using custom grunt plugin

 

Have you ever thought that how much time you are spending to build AEM clientlibs and how much time you are wasting on just to find out what js or CSS file to include by asking front end developer, something like this hey Raj tell me, what are all the files should I include for this particular component or template? even though if you are a professional developer sometimes you will definitely face a problem because you are not a front-end developer, you don’t know what the front end developer is done.

Recently, when I was doing POC on how to integrate AEM with Angular 2, I felt like the Angular 2 generates lot of JavaScript so it is good to have separate clientlib for every component or separate js files for every component and finally combine into a single file to avoid maintenance issues

Have you ever thought that if front end people creates a clientlib for you instead of providing CSS and js files? sounds great, haha, the problem here is the front-end people cannot create clientlibs, because they are not AEM developers?

To solve above problems and also to streamline the integration process, I have created a custom Grunt plugin called Grunt AEM clientlibs generator and installer plugin, which generates clientlibs and automatically deploy’s it into your local AEM instance in a minute

The plugin is published into Grunt repository you can check this Grunt AEM clientlibs generator and installer plugin and also you can download it by running below command

Generating AEM clientlibs using Grunt

The pre-requisites for this is you must install node.js on your local machine and also the AEM author instance should up and running

Step 1:

if you are not a front-end developer then refer this for downloading and installing node.js on your local machine, once node.js is installed then create a folder called “clientlibs-generation” in the “C:\\” drive

Step 2:

Open the “clientlibs-generation” folder in the command prompt and run the below commands

The above command install all the grunt related node modules into the “clientlibs-generation” folder

Step 3:

Now, run the below command to install our custom clientlibs generator grunt plugin

Step 4:

Now, copy and paste CSS and js folder into the “clientlibs-generation” folder, which you want to include in the AEM client libs, here the test folder contains css and js folders

aem-clientlibs-generator

Step 5:

Create a Gruntfile, add a task and configure options

Step 6:

After running below command, using the packageName option which is provided in the Gruntfile.js the plugin will create one zip folder and it will be deployed into your local AEM instance and you can copy and paste another folder into your eclipse to check-in into your version control if required

 

aem-clientlibs-generator-1

Now, go and open AEM instance package manager, you should see something like below, by default it is not installed, if you want to install by default then you must change force and install option to “true” in the Gruntfile.js

aem-clientlibs-generator-2

How to run sample project?

Download below code then open the command prompt of extracted folder and execute step 3 & 4 and finally run below command

 

Download Example