grunt-bower-clientlibs

Dinamically generates CQ Clientlibs using Bower

Usage no npm install needed!

<script type="module">
  import gruntBowerClientlibs from 'https://cdn.skypack.dev/grunt-bower-clientlibs';
</script>

README

Dinamically generates CQ Clientlibs using Bower.

Install

npm install grunt-bower-clientlibs --save-dev

Usage

require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

grunt.initConfig({
  bower: {
    install: {
        options: {
            targetDir: './vendorTargetDir',
            projectName: 'projectName'
        }
    }
  }
});

grunt.registerTask('default', ['eslint']);

Options

options.targetDir

Type: String Default value: ./lib

A directory where you want to keep your Bower packages.

options.projectName

Type: String Default value: ''

String to be added to the clientlib name. i.e [libraryName].[projectName].[clientlibSuffix]

options.clientlibSuffix

Type: String Default value: ''

String to be added as a suffix to the clientlib name. i.e [libraryName].[projectName].[clientlibSuffix]

If you need to support custom layout then you can specify layout as a function of type and component:

var path = require('path');

grunt.initConfig({
  bower: {
    install: {
      options: {
        layout: function(type, component) {
          var renamedType = type;
          if (type == 'js') renamedType = 'javascripts';
          else if (type == 'css') renamedType = 'stylesheets';

          return path.join(component, renamedType);
        }
      }
    }
  }
});

options.bowerOptions

Type: Object Default value: {}

An options object passed through to the bower.install api, possible options are as follows:

{
    forceLatest: true|false,    // Force latest version on conflict
    production: true|false,     // Do not install project devDependencies
}

Usage Examples

grunt.initConfig({
  bower: {
    install: {
      options: {
        targetDir: 'target/vault-work/jcr_root/etc/designs/lodges/clientlibs/vendor',
        projectName: 'lodges'
      }
    }
  }
});

Configure bower.json file:

You'll need to specify in your bower.json which are the files you are interested in from each listed dependency. In here you'll have the chance to override the main files defined in its related bower.json and create the clientlib using only the specified files.

{
  "name": "simple-bower",
  "version": "0.0.0",
  "dependencies": {
    "bootstrap-sass": "*",
    "owlcarousel": "git://github.com/OwlFonk/OwlCarousel2.git"
  },
  "clientlibsOverride": {
    "bootstrap-sass": {
      "js": "js/*.js",
      "scss": "lib/*.scss",
      "img": "img/*.png"
    },
    "owlcarousel": {
      "css": [
        "dist/assets/owl.carousel.css",
        "dist/assets/owl.theme.default.css"
      ],
      "js": "dist/owl.carousel.js",
      "dependencies": "main.lodges.clientlib"
    }
  }
}

grunt-bower-clientlibs will do the rest:

  • If Bower package has defined "main" files then they will be copied to ./lib/<package>/.
  • If "main" files are empty then the whole package directory will be copied to ./lib.
  • When you define "clientlibsOverride" only asset types and files specified by you will be copied to ./lib.

Credits

Ivan Yatskevich

License

Licensed under the MIT license.

https://github.com/yatskevich/grunt-bower-clientlibs/blob/master/LICENSE-MIT