npm install grunt-clientlibify --save-dev

grunt.loadNpmTasks('grunt-clientlibify');

In your project's Gruntfile, add a section namedclientlibify to the data object passed intogrunt.initConfig().

grunt.initConfig({clientlibify:{options:{// Task-specific options go here.},your_target:{// Target-specific file lists and/or options go here.},},});

Type:String

A string value that is used to indicate where the.css or.less files should be fetched from.This would likely be the path to yourcss directory. For example,dist/css.

Type:String

A string value that is used to indicate where the.js files should be fetched from.This would likely be the path to yourjs directory. For example,dist/js.

Type:Array

An optional Array of paths to additional style guide assets that should be included in the CRX package.This would likely be a set of paths to images, fonts, etc. For example,dist/img.All directories specified will be copied over at the same level as the CSS and JS directories.

This option only supports directories. Files will be ignored.

Type:StringDefault value:tmp

A string value that is used to indicate where the CRX package (.zip) should be placed.

Type:BooleanDefault value:false

A boolean value that is used to indicate whether the generated CRX package should be deployedand installed onto an AEM instance.

If set totrue, theoptions.deploy* options must be provided.

Type:ArrayDefault value:['etc-clientlibify']

An array of string values that will be used as the clientlib categories.

Note: thefirst entry in this array will be used as the design folder name (i.e. /etc/designs/etc-clientlibify).

Type:ArrayDefault value:[]

An array of string values that will be used as the clientlib embed values.

Type:ArrayDefault value:[]

An array of string values that will be used as the clientlib dependencies.

Type:ArrayDefault value:[]

An array of string values that will be used as the clientlib js processors (i.e. "min:gcc")

Requires AEM 6.2 or above

Type:ArrayDefault value:[]

An array of string values that will be used as the clientlib css processors (i.e. "min:none")

Requires AEM 6.2 or above

Type:BooleanDefault value:false

A boolean determining if the client library should be accessible via the proxy servlet

Requires AEM 6.3 or above

Type:StringDefault value:clientlibify

A string value that is used as the CRX package name as well as part of the packagefilename (name-version.zip).

Type:StringDefault value:1.0

A string value that is used as the CRX package version as well as part of the packagefilename (name-version.zip).

Type:StringDefault value:my_packages

A string value that is used as the CRX package group (using AEM's default package group).

Type:StringDefault value:CRX package installed using the grunt-clientlibify plugin

A string value that is used as the CRX package description.

Type:StringDefault value:http

A string value that is used to define the scheme part of the URL (i.e. http, https, etc)

Type:StringDefault value:localhost

A string value that is used to define the host the CRX package will be deployed to.

Type:StringDefault value:4502

A string value that is used to define the port the CRX package will be deployed to.

Type:StringDefault value:admin

A string value that is used to define the AEM username that will be used to authenticatethe package install HTTP request. This username will also be identified as the package installer.

Type:StringDefault value:admin

A string value that is used to define the AEM password that will be used to authenticatethe package install HTTP request.

In this example, only the mandatory configuration is provided (only one ofcssDir orjsDir must be provided)and the rest of the options use their default values. As a result, this task will create a CRX packageinside thetmp directory containing the.css and.less files underassets/styles/css. The filewill be nameclientlibify-1.0.zip and is ready to be installed on an AEM instance.

grunt.initConfig({clientlibify:{options:{cssDir:'assets/styles/css'},}});

In this example, all options have been provided. As a result, a CRX package will be created insidedist with the nameprickly-pear-2.1.zip. This package will contain all the.cssand.less files underassets/styles/css, as well as the.js files underassets/scripts.The important thing here is that theinstallPackage option has been set totrue. This means thatonce the CRX package is created, the task will install it on an AEM instance using the credentialsprovided in theoptions.deploy* configuration.

grunt.initConfig({clientlibify:{options:{dest:'dist',cssDir:'assets/styles/css',jsDir:'assets/scripts',assetsDirs:['assets/images','assets/fonts'],installPackage:true,categories:['awesome-styleguide'],embed:[],dependencies:['cq-jquery'],jsProcessor:['min:gcc'],cssProcessor:['min:none'],allowProxy:false,// package optionspackageName:'prickly-pear',packageVersion:'2.1',packageGroup:'My Company',packageDescription:'CRX package installed using the grunt-clientlibify plugin',// deploy optionsdeployScheme:'http',deployHost:'localhost',deployPort:'4502',deployUsername:'admin',deployPassword:'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 usingGrunt.