{"id":18081983,"url":"https://github.com/mickleroy/grunt-clientlibify","last_synced_at":"2025-09-06T03:45:55.090Z","repository":{"id":57254787,"uuid":"47973158","full_name":"mickleroy/grunt-clientlibify","owner":"mickleroy","description":"Grunt plugin for integrating AEM with a styleguide","archived":false,"fork":false,"pushed_at":"2017-07-27T00:26:25.000Z","size":48,"stargazers_count":5,"open_issues_count":0,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-12T15:08:58.849Z","etag":null,"topics":["aem","clientlibs","grunt","plugin","styleguide"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mickleroy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-14T12:14:24.000Z","updated_at":"2017-05-16T11:50:17.000Z","dependencies_parsed_at":"2022-08-31T09:00:24.385Z","dependency_job_id":null,"html_url":"https://github.com/mickleroy/grunt-clientlibify","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mickleroy%2Fgrunt-clientlibify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mickleroy%2Fgrunt-clientlibify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mickleroy%2Fgrunt-clientlibify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mickleroy%2Fgrunt-clientlibify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mickleroy","download_url":"https://codeload.github.com/mickleroy/grunt-clientlibify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248586235,"owners_count":21128997,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aem","clientlibs","grunt","plugin","styleguide"],"created_at":"2024-10-31T13:17:41.668Z","updated_at":"2025-04-12T15:09:03.736Z","avatar_url":"https://github.com/mickleroy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# grunt-clientlibify\n\n[![Build Status](https://travis-ci.org/mickleroy/grunt-clientlibify.svg?branch=master)](https://travis-ci.org/mickleroy/grunt-clientlibify)\n\n\u003e Integrate AEM with a styleguide\n\n## Motivation\nThere is a push in the industry to code against an external style guide to maintain consistent styling and have a reusable\nset of components to build applications with. In my experience working with AEM/CQ, integrating\na style guide into a project has consistently been a challenge. Each project generally ends up with a set of custom\nscripts to achieve this integration (heavily scripted Grunt files, Groovy scripts, Git sub-trees, etc).\n\nThis plugin aims to take the guess work out of integrating AEM with an external style guide\nby leveraging javascript tooling to build (and optionally deploy) a CRX package containing those front-end assets.\n\nMore info on Clientlibs on the [AEM Documentation](https://docs.adobe.com/docs/en/cq/5-6-1/developing/clientlibs.html).\n\nThis plugin is listed on the NPM registry [here](https://www.npmjs.com/package/grunt-clientlibify).\n\n## Getting Started\nThis plugin requires Grunt `~0.4.5`\n\nIf you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:\n\n```shell\nnpm install grunt-clientlibify --save-dev\n```\n\nOnce the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:\n\n```js\ngrunt.loadNpmTasks('grunt-clientlibify');\n```\n\n## The \"clientlibify\" task\n\n### Overview\nIn your project's Gruntfile, add a section named `clientlibify` to the data object passed into `grunt.initConfig()`.\n\n```js\ngrunt.initConfig({\n  clientlibify: {\n    options: {\n      // Task-specific options go here.\n    },\n    your_target: {\n      // Target-specific file lists and/or options go here.\n    },\n  },\n});\n```\n\n### Clientlib Options\n\n#### options.cssDir\nType: `String`\n\nA string value that is used to indicate where the `.css` or `.less` files should be fetched from.\nThis would likely be the path to your `css` directory. For example, `dist/css`.\n\n#### options.jsDir\nType: `String`\n\nA string value that is used to indicate where the `.js` files should be fetched from.\nThis would likely be the path to your `js` directory. For example, `dist/js`.\n\n#### options.assetsDirs\nType: `Array`\n\nAn optional Array of paths to additional style guide assets that should be included in the CRX package.\nThis would likely be a set of paths to images, fonts, etc. For example, `dist/img`.\nAll directories specified will be copied over at the same level as the CSS and JS directories.\n\u003e This option only supports directories. Files will be ignored.\n\n#### options.dest\nType: `String`\nDefault value: `tmp`\n\nA string value that is used to indicate where the CRX package (.zip) should be placed.\n\n#### options.installPackage\nType: `Boolean`\nDefault value: `false`\n\nA boolean value that is used to indicate whether the generated CRX package should be deployed\nand installed onto an AEM instance.\n\u003e If set to `true`, the `options.deploy*` options must be provided.\n\n#### options.categories\nType: `Array`\nDefault value: `['etc-clientlibify']`\n\nAn array of string values that will be used as the clientlib categories.\n\u003e Note: the _first_ entry in this array will be used as the design folder name (i.e. /etc/designs/etc-clientlibify).\n\n#### options.embed\nType: `Array`\nDefault value: `[]`\n\nAn array of string values that will be used as the clientlib embed values.\n\n#### options.dependencies\nType: `Array`\nDefault value: `[]`\n\nAn array of string values that will be used as the clientlib dependencies.\n\n#### options.jsProcessor\nType: `Array`\nDefault value: `[]`\n\nAn array of string values that will be used as the clientlib js processors (i.e. \"min:gcc\")\n\u003e Requires AEM 6.2 or above\n\n#### options.cssProcessor\nType: `Array`\nDefault value: `[]`\n\nAn array of string values that will be used as the clientlib css processors (i.e. \"min:none\")\n\u003e Requires AEM 6.2 or above\n\n#### options.allowProxy\nType: `Boolean`\nDefault value: `false`\n\nA boolean determining if the client library should be accessible via the proxy servlet\n\u003e Requires AEM 6.3 or above\n\n### CRX Package Options\n\n#### options.packageName\nType: `String`\nDefault value: `clientlibify`\n\nA string value that is used as the CRX package name as well as part of the package\nfilename (name-version.zip).\n\n#### options.packageVersion\nType: `String`\nDefault value: `1.0`\n\nA string value that is used as the CRX package version as well as part of the package\nfilename (name-version.zip).\n\n#### options.packageGroup\nType: `String`\nDefault value: `my_packages`\n\nA string value that is used as the CRX package group (using AEM's default package group).\n\n#### options.packageDescription\nType: `String`\nDefault value: `CRX package installed using the grunt-clientlibify plugin`\n\nA string value that is used as the CRX package description.\n\n### Deploy Options\n\n#### options.deployScheme\nType: `String`\nDefault value: `http`\n\nA string value that is used to define the scheme part of the URL (i.e. http, https, etc)\n\n#### options.deployHost\nType: `String`\nDefault value: `localhost`\n\nA string value that is used to define the host the CRX package will be deployed to.\n\n#### options.deployPort\nType: `String`\nDefault value: `4502`\n\nA string value that is used to define the port the CRX package will be deployed to.\n\n#### options.deployUsername\nType: `String`\nDefault value: `admin`\n\nA string value that is used to define the AEM username that will be used to authenticate\nthe package install HTTP request. This username will also be identified as the package installer.\n\n#### options.deployPassword\nType: `String`\nDefault value: `admin`\n\nA string value that is used to define the AEM password that will be used to authenticate\nthe package install HTTP request.\n\n### Usage Examples\n\n#### Default Options\nIn this example, only the mandatory configuration is provided (only one of `cssDir` or `jsDir` must be provided)\nand the rest of the options use their default values. As a result, this task will create a CRX package\ninside the `tmp` directory containing the `.css` and `.less` files under `assets/styles/css`. The file\nwill be name `clientlibify-1.0.zip` and is ready to be installed on an AEM instance.\n\n```js\ngrunt.initConfig({\n  clientlibify: {\n    options: {\n      cssDir: 'assets/styles/css'\n    },\n  }\n});\n```\n\n#### Custom Options\nIn this example, all options have been provided. As a result, a CRX package will be created inside\n`dist` with the name `prickly-pear-2.1.zip`. This package will contain all the `.css`\nand `.less` files under `assets/styles/css`, as well as the `.js` files under `assets/scripts`.\nThe important thing here is that the `installPackage` option has been set to `true`. This means that\nonce the CRX package is created, the task will install it on an AEM instance using the credentials\nprovided in the `options.deploy*` configuration.\n\n```js\ngrunt.initConfig({\n  clientlibify: {\n    options: {\n      dest: 'dist',\n      cssDir: 'assets/styles/css',\n      jsDir: 'assets/scripts',\n      assetsDirs: ['assets/images', 'assets/fonts'],\n      installPackage: true,\n      categories: ['awesome-styleguide'],\n      embed: [],\n      dependencies: ['cq-jquery'],\n      jsProcessor: ['min:gcc'],\n      cssProcessor: ['min:none'],\n      allowProxy: false,\n\n      // package options\n      packageName: 'prickly-pear',\n      packageVersion: '2.1',\n      packageGroup: 'My Company',\n      packageDescription: 'CRX package installed using the grunt-clientlibify plugin',\n\n      // deploy options\n      deployScheme: 'http',\n      deployHost: 'localhost',\n      deployPort: '4502',\n      deployUsername: 'admin',\n      deployPassword: 'admin'\n    },\n  }\n});\n```\n\n## Contributing\nIn 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](http://gruntjs.com/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmickleroy%2Fgrunt-clientlibify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmickleroy%2Fgrunt-clientlibify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmickleroy%2Fgrunt-clientlibify/lists"}