3rd Party Scripts

If you require 3rd party JavaScript like jQuery or any js-plugins in your project, consider managing them with bower. Patternlab-scaffolding provides a workflow for this as well.

Example

Let's assume you need jquery-placeholder in your project. The first step is to install it (via bower):

$ bower install jquery-placeholder

developer-dependencies should be suffixed with --save-dev, otherwise --save

We now want to import that plugin from bower_components into our source/ directory. But we don't do this by hand! We need to open grunt/bowercopy.js. Uncomment the "plugins" section and add the path from main production script from bower_components/:

plugins: {
    src: [
        'jquery-placeholder/jquery.placeholder.min.js'
    ],
    dest: '<%= globalConfig.source.js %>/vendor/plugins'
}

For automatic injection into the HTML, go to source/_patterns/00-atoms/00-meta/_01-foot.mustache and add the injector-comments to the template:

    <!--DO NOT REMOVE-->
    {% pattern-lab-foot %}

    <!-- injector:js -->
    <!-- endinjector -->

    </body>
</html>

The path to every JavaScript library/plugin referenced in grunt/bowercopy.js gets automatically injected between the comments now.

Subsequently you must run grunt bowerInject after adding a new script.

Cms

A single concatenated vendor.min.js-file is delivered to the cms js-directory which you can reference for once in the foot-template of your cms. This file contains every JavaScript library/plugin you specified in grunt/bowercopy.js.