Bundle "many" resources

tips & tricks
10

Extending on @bep’s suggestion. I pass a JSON file which contains the URLs (relative to the assets directory) and then iterate over this.

The above method adds the benefit of a cleaner file and allows us to specify the concat order for our JS. For those that use a frontend framework like Foundation, this also allows us to selectively pick our JS modules to reduce file size on build.

    {{ $scripts := getJSON "./assets/js/scripts.json" }}
    {{ $.Scratch.Set "jslibs" slice }}
    {{ range $scripts.scripts }}
       {{ $.Scratch.Add "jslibs" (resources.Get . ) }}
    {{ end }}
    {{ $js := .Scratch.Get "jslibs" | resources.Concat "js/combined-scripts.js" | resources.Minify | fingerprint }}
    <script src="{{ $js.Permalink }}"></script>

I package this up into a partial “site-scripts.html” and call it at the foot of baseof.html

{{ partial "common/site-scripts" . }}

… and feed in a JSON file with my required JS files

    {
       "scripts" : [
          "dependencies/jquery/dist/jquery.min.js",
          "dependencies/what-input/dist/what-input.min.js",
          "dependencies/flickity/dist/flickity.pkgd.min.js",
          "dependencies/algoliasearch/dist/algoliasearch.jquery.min.js",
          "dependencies/autocomplete.js/dist/autocomplete.jquery.min.js",
          "dependencies/mixitup/dist/mixitup.min.js",
          "dependencies/foundation-sites/dist/js/plugins/foundation.core.min.js",
          "dependencies/foundation-sites/dist/js/plugins/foundation.util.mediaQuery.min.js",
          "dependencies/foundation-sites/dist/js/plugins/foundation.util.box.min.js",
          "dependencies/foundation-sites/dist/js/plugins/foundation.util.keyboard.min.js",
          "dependencies/foundation-sites/dist/js/plugins/foundation.util.motion.min.js",
          "dependencies/foundation-sites/dist/js/plugins/foundation.util.nest.min.js",
          "dependencies/foundation-sites/dist/js/plugins/foundation.util.triggers.min.js",
          "dependencies/foundation-sites/dist/js/plugins/foundation.abide.min.js",
          "dependencies/foundation-sites/dist/js/plugins/foundation.accordionMenu.min.js",
          "dependencies/foundation-sites/dist/js/plugins/foundation.dropdownMenu.min.js",
          "dependencies/foundation-sites/dist/js/plugins/foundation.responsiveMenu.min.js",
          "dependencies/foundation-sites/dist/js/plugins/foundation.responsiveToggle.min.js",
          "dependencies/foundation-sites/dist/js/plugins/foundation.toggler.min.js",
          "js/init-foundation.js"
       ]
    }

Extra tip for those that are using a package manage like Yarn, NPM etc.

I run a bash script to selectively copy my required dependencies to my assets directory, which is gitignored as the site is built on each push using a CI tool. This mitigates the limitations of referencing resources that live outside of the assets directory without having to resort to symlinks (which can break when using a CI tool).

    #!/usr/bin/env bash

    # Make dependencies directory inside assets and copy dependencies if directory does not exist
    if [ ! -d "assets/dependencies" ]
    then
       mkdir assets/dependencies
       
       # Copy dependencies
       cp -rf node_modules/algoliasearch assets/dependencies/algoliasearch
       cp -rf node_modules/autocomplete.js assets/dependencies/autocomplete.js
       cp -rf node_modules/flickity assets/dependencies/flickity
       cp -rf node_modules/foundation-sites assets/dependencies/foundation-sites
       cp -rf node_modules/jquery assets/dependencies/jquery
       cp -rf node_modules/mixitup assets/dependencies/mixitup
       cp -rf node_modules/what-input assets/dependencies/what-input

       # Rename any CSS files to SCSS
       mv assets/dependencies/flickity/dist/flickity.css assets/dependencies/flickity/dist/flickity.scss

       echo Dependancies copied!
    fi
5 Likes