grunt-aem-clientlibs-generator-installer

Automates generating AEM clientlibs using Gruntfile

Getting Started

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');

The "aem_clientlibs_generator_installer" task

Overview

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'
    }
  },
});

Options

options.cssDirectory

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

options.jsDirectory

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

options.projectPageName

Type: String Default value: 'keysandstrokes'

A string value that is used under which page the clientlibs need to be created EX: etc/designs/keysandstrokes.

options.clientLibName

Type: String Default value: 'keysandstrokes'

Provide the clientlib folder name EX: etc/designs/keysandstrokes/clientlibs.

options.categories

Type: String Default value: 'keysandstrokes'

Provide the categories for clientlibs

options.dependencies

Type: String Default value: '[]'

Provide the dependencies for clientlibs

options.embed

Type: String Default value: '[]'

Provide the embed for clientlibs

options.channels

Type: String Default value: '[]'

Provide the channels for clientlibs

options.packageName

Type: String Default value: 'keysandstrokes'

Provide the package name

options.packageVersion

Type: String Default value: '1.0'

Provide the package version

options.packageGroup

Type: String Default value: 'my_packages'

Provide the package group

options.packageDescription

Type: String Default value: 'This package is created and installed using aem_clientlibs_generator_installer plugin'

Provide the package description

options.aemInstanceUrl

Type: String Default value: 'http://localhost:4504/'

Provide the aem instance url

options.force

Type: String Default value: 'false'

The false will not install the package, if it is already installed

options.install

Type: String Default value: 'false'

The true will auto install the package

options.aemUserName

Type: String Default value: 'admin'

Provide the username for AEM instance

options.aemPassword

Type: String Default value: 'admin'

Provide the password for AEM instance

Usage Examples

Default Options

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'
    },
    
  },
});

Contributing

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.

Release History

(Nothing yet)