{"id":18080112,"url":"https://github.com/mickleroy/gulp-clientlibify","last_synced_at":"2025-04-12T14:21:17.907Z","repository":{"id":57257058,"uuid":"47972696","full_name":"mickleroy/gulp-clientlibify","owner":"mickleroy","description":"Gulp plugin for integrating AEM with a styleguide","archived":false,"fork":false,"pushed_at":"2017-07-27T00:41:50.000Z","size":33,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-26T08:51:35.458Z","etag":null,"topics":["aem","clientlibs","gulp","plugin","styleguide"],"latest_commit_sha":null,"homepage":"","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:03:54.000Z","updated_at":"2020-10-06T23:15:20.000Z","dependencies_parsed_at":"2022-09-02T19:12:25.235Z","dependency_job_id":null,"html_url":"https://github.com/mickleroy/gulp-clientlibify","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mickleroy%2Fgulp-clientlibify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mickleroy%2Fgulp-clientlibify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mickleroy%2Fgulp-clientlibify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mickleroy%2Fgulp-clientlibify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mickleroy","download_url":"https://codeload.github.com/mickleroy/gulp-clientlibify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248578874,"owners_count":21127714,"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","gulp","plugin","styleguide"],"created_at":"2024-10-31T13:05:55.612Z","updated_at":"2025-04-12T14:21:17.880Z","avatar_url":"https://github.com/mickleroy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gulp-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/gulp-clientlibify).\n\n## Getting Started\nInstall this plugin with this command:\n\n```shell\nnpm install gulp-clientlibify --save-dev\n```\n\nOnce the plugin has been installed, it may be enabled inside your Gulpfile with this line of JavaScript:\n\n```js\nvar clientlibify = require('gulp-clientlibify');\n```\n\n## The \"clientlibify\" function\n\n### Overview\nIn your project's Gulpfile, add a task and pipe your assets to the `clientlibify` function.\n\n```js\ngulp.task('clientlibify', function() {\n    return gulp.src('assets/**/*')\n        .pipe(clientlibify({\n            //options go here\n        }))\n        .pipe(gulp.dest('dist'))\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 gulp-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\ngulp.task('clientlibify', function() {\n    return gulp.src('assets/**/*')\n        .pipe(clientlibify({\n            cssDir: 'assets/styles/css'\n        }))\n        .pipe(gulp.dest('dist'))\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\ngulp.task('clientlibify', function() {\n    return gulp.src('assets/**/*')\n        .pipe(clientlibify({\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 gulp-clientlibify plugin',\n            \n            // deploy options\n            deployScheme: 'http',\n            deployHost: 'localhost',\n            deployPort: '4502',\n            deployUsername: 'admin',\n            deployPassword: 'admin'\n        }))\n        .pipe(gulp.dest('dist'))\n});\n```\n\nCheck out the [sample project](https://github.com/mickleroy/gulp-clientlibify/tree/master/sample-project) for more information.\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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmickleroy%2Fgulp-clientlibify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmickleroy%2Fgulp-clientlibify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmickleroy%2Fgulp-clientlibify/lists"}