CSS and JS resource management

Very often there is a need to manage the connection of CSS and JS files on various pages of the site. Let’s say all pages need to use the set1 fileset; for all internal pages of the / about / section, you must additionally use set2 and set3, but for the / about / contacts / page, you must use set4 instead of set2 (that is, set1, set4, set3, in that order). In addition, the URL of all resources must be substituted with the file modification date in order to effectively flush the cache.

To solve these problems, the docpad-plugin-frontend plugin was written. It adds the assets (prefix) method, which allows you to get a sorted list of resources from the current document and the entire chain of templates applied to the document. If a .build-catalog.json file exists in the project root folder, the plugin reads it and returns a list of resources prefixed with the file modification date.

For example, the problem described above with managing resource sets can be solved as follows. For the main template default.html.eco, we specify the main set of files in the meta data:

---
js: "/js/fileA.js"
---
In the template about.html.eco, which inherits from the main template and applies to all documents / about / *, we specify the following data: 
--- 
layout: default 
js2: ["/js/fileB.js", "/js/fileC.js"] 
js3: ["/js/fileD.js", "/js/fileE.js"]
 ---
In the document /about/contacts/index.html, we overlap the js2 set: 
--- 
layout: about
 js2: "/js/contacts.js" 
---
Now, when rendering the page /about/contacts/index.html, calling assets ('js') will return the following set of files: 
 /js/fileA.js
 /js/contacts.js
 /js/fileD.js
 /js/fileE.js