ClientLib snippets

Clientlib folder definition (.content.xml)

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    categories="[phi.site]"
    dependencies="[phi.dependencies]"
    allowProxy="{Boolean}true"
    jsProcessor="[default:none,min:gcc]"
    cssProcessor="[default:none,min:none]"/>

With css.txt / js.txt manifests:

#base=css
site.css
components/plancard.css

HTL includes (page component)

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
  <sly data-sly-call="${clientlib.css @ categories='phi.site'}"></sly>       <!-- head -->
  <sly data-sly-call="${clientlib.js  @ categories='phi.site'}"></sly>       <!-- before </body> -->
  <sly data-sly-call="${clientlib.all @ categories=['phi.dependencies','phi.site']}"></sly>
</sly>

aem-clientlib-generator config (ui.frontend/clientlib.config.js)

module.exports = {
  context: __dirname,
  clientLibRoot: '../ui.apps/src/main/content/jcr_root/apps/phi-academy/clientlibs',
  libs: [{
    name: 'clientlib-site',
    categories: ['phi.site'],
    dependencies: ['phi.dependencies'],
    allowProxy: true,
    assets: {
      js:  { cwd: 'dist/js',  files: ['**/*.js'],  flatten: false },
      css: { cwd: 'dist/css', files: ['**/*.css'], flatten: false },
      resources: { cwd: 'dist/resources', files: ['**/*'], flatten: false }
    }
  }]
};

Debug helpers

?debugClientLibs=true                     unbundled includes with source paths
/libs/granite/ui/content/dumplibs.html    every lib, category, path
/libs/granite/ui/content/dumplibs.rebuild.html   rebuild cached libs (dev troubleshooting)