Automates generating AEM clientlibs using Gruntfile
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?
Are you looking for complete article on how to use this plugin then check this How to build AEM clientlibs using custom grunt plugin
This plugin requires Grunt ~0.4.5
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-aem-clientlibs-generator-installer --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-aem-clientlibs-generator-installer');
In your project's Gruntfile, add a section named aem_clientlibs_generator_installer
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
aem_clientlibs_generator_installer: {
options: {
cssDirectory: 'test/css',
jsDirectory: 'test/js',
projectPageName: 'keysandstrokes-page',
clientLibName:'clientlibs',
categories: 'keysandstrokes-global,global',
dependencies: [],
embed: [],
channels: [],
packageName: 'keysandstrokes',
packageVersion: '1.0',
packageGroup: 'my_packages',
packageDescription: 'This package is created and installed using aem_clientlibs_generator_installer plugin',
aemInstanceUrl: 'http://localhost:4504/',
force: 'false',
install: 'false',
aemUserName: 'admin',
aemPassword: 'admin'
}
},
});
Type: String
Default value: 'test/css'
A string value that is used to fetch css files from the provided folder path. you must provide the directory path Ex : test/css
Type: String
Default value: 'test/js'
A string value that is used to fetch js files from the provided folder path. you must provide the directory path Ex : test/js
Type: String
Default value: 'keysandstrokes'
A string value that is used under which page the clientlibs need to be created EX: etc/designs/keysandstrokes.
Type: String
Default value: 'keysandstrokes'
Provide the clientlib folder name EX: etc/designs/keysandstrokes/clientlibs.
Type: String
Default value: 'keysandstrokes'
Provide the categories for clientlibs
Type: String
Default value: '[]'
Provide the dependencies for clientlibs
Type: String
Default value: '[]'
Provide the embed for clientlibs
Type: String
Default value: '[]'
Provide the channels for clientlibs
Type: String
Default value: 'keysandstrokes'
Provide the package name
Type: String
Default value: '1.0'
Provide the package version
Type: String
Default value: 'my_packages'
Provide the package group
Type: String
Default value: 'This package is created and installed using aem_clientlibs_generator_installer plugin'
Provide the package description
Type: String
Default value: 'http://localhost:4504/'
Provide the aem instance url
Type: String
Default value: 'false'
The false will not install the package, if it is already installed
Type: String
Default value: 'false'
The true will auto install the package
Type: String
Default value: 'admin'
Provide the username for AEM instance
Type: String
Default value: 'admin'
Provide the password for AEM instance
In this example, the default options are used to do something with whatever. So if the testing
file has the content Testing
and the 123
file had the content 1 2 3
, the generated result would be Testing, 1 2 3.
grunt.initConfig({
aem_clientlibs_generator_installer: {
options: {
cssDirectory: 'test/css',
jsDirectory: 'test/js',
projectPageName: 'keysandstrokes-page',
clientLibName:'clientlibs',
categories: 'keysandstrokes-global,global',
dependencies: [],
embed: [],
channels: [],
packageName: 'keysandstrokes',
packageVersion: '1.0',
packageGroup: 'my_packages',
packageDescription: 'This package is created and installed using aem_clientlibs_generator_installer plugin',
aemInstanceUrl: 'http://localhost:4504/',
force: 'false',
install: 'false',
aemUserName: 'admin',
aemPassword: 'admin'
},
},
});
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
(Nothing yet)