← General Information

Make File Automation

This is a guide for how to use a few gulp tasks to generate the JSON for the pages, templates, and menu sections of the yourfi-make.json file. These tasks should be used after you have completed HTML development of your site and prior to scaffolding to UAT. These tasks can be run individually or all together with the use of gulp make-everything.

Make Everything

This task will run everything mentioned below simultaneously to help save time similar to how the default gulp task runs. To run this task use the following command.

‘gulp make-everything’

Templates

This task will generate the JSON for the "templates": [] section of the make file. To run this task on its own use the following command.

gulp make-templates

Once this is run it will read through each of the HTML files generated by gulp mustache and pull the file name and every instance of div[data-content-block] The file name is used as the templateId, title, and description of the template. By default each template has devOnly set to true and imageLocation set to /assets/templates/dev-only.png.

After the task completes, a new templates.json file is created in your projects development folder with all the JSON needed for the make file in a minified format. I would recommend using a text editor package to properly format the JSON code. Once the code is in a non-minified format, you should go through and update the title and description for each template so that they have more meaningful information showing in the CMS. After that you can copy the entire templates.json file and paste it into the make file overwriting the existing templates section.

Error messages have been set to trigger if a template has exceeded the max number of content areas the CMS can handle, as well as if a content area name is used multiple times. Two beeps will sound signaling an error and a console log message will show in terminal explaining what template or content area name is causing the error.

If you run this task on its own be sure to run gulp format-make-sections so that it can remove any unnecessary commas that were inserted during the process. This step is not necessary when using gulp make-everything as it is already included at the end of that sequence.

Pages

This task will generate the JSON for the "pages": [] section of the make file. To run this task on its own use the following command.

gulp make-all-pages

Before using this task be sure to build your nav.mustache using updated snippets found here https://git.banno.com/cms-development/bs3-snippets. The menuItem snippet has some new data attributes needed for the gulp task to function properly. Also be sure change the anchors parent li to have a class of menu-external if the link doesn’t go somewhere on the page so that the gulp task can ignore these menu items.

  • data-template - This attribute will tell gulp what the templateId should be. This attribute should be set to the name of your mustache file to be used for the page. This is set to subpage by default.
  • data-duplicate - This attribute will tell gulp if the page and URL has been used in the menu and therefore should not be listed again in the pages section of the make file. The value for this attribute should be either true or false and is set to false by default. Be sure to have at least one menu item have data-duplicate set to false or the page will be ignored entirely.
  • data-showsentinel - This attribute will tell gulp if the page should include the Sentinel(Banno Monitor) badge. The value for this attribute should be either true or false and is set to false by default.
  • href - This attribute is now very important and should reflect how the url would look on the UAT site. This attribute will set the url of the page and also is used to determine the Page Category by removing everything after the last “/” and turning dashes into space as well as capitalizing each word in the category.

Here is a small example of what the nav should look like once built:

Menu Sample Code

Once this is run it will read through home.html file generated by gulp mustache to find each instance of an anchor tag inside of a element with the class banno-menu. Since this task only runs through the home.html file, any menu set up to appear only on a subpage will not be included. This task will run through each anchor tag and pull the values of the Attributes listed above. Once the JSON for your banno-menu pages is created a new task will run to concatenate the custom-pages.json that was created with a default-pages.json which stores all the pages that initially exist in the make file (Home, Search, 404, Privacy Policy, Style Guide, and all the Calculator pages). The concatenation task will combine the two files into an all-pages.json that you can copy and paste into the make file overwriting the existing pages section.

Similar to the gulp make-templates task if you run this task on its own be sure to run gulp format-make-sections so that it can remove any unnecessary commas that were inserted during the process. This step is not necessary when using gulp make-everything as it is already included at the end of that sequence.

This task will generate the JSON for the "menus": [] section of the make file. To run this task on its own use the following command.

gulp make-menus

With this task just like with the pages task needs the menus completely built prior to use. Also like the pages task above when run this will only read through the home.html file meaning that any menu set up to appear only on a subpage will not be included.

When the task completes, a new menus.json file is created in your projects development folder with all the JSON needed for the make file in a minified format. I would recommend using a text editor package to properly format the JSON code. Once the code is in a non-minified format, you should go through and update the label attribute of each menu to be more descriptive instead of Menu 1, Menu 2, etc. After that you can copy the entire menus.json file and paste it into the make file overwriting the existing Menus section.

Questions?

  1. Will these tasks create the entire make file?
    • No, these tasks are used to generate the pages, templates, and menu sections of the make file. You will still need to manually change the institutions, sharedContentGroups, disclaimer, forms, and feeds sections. But since pages, templates, and menus is the bulk of the make file it will save a lot of time automating its creation.
  2. Do I need to delete the generated JSON files before running task again?
    • No, the tasks are set to overwrite any existing file, so there isn’t any issues with duplicating the JSON.
  3. Why are the new files minified?
    • When its creating these files its writing the file from a string which doesn’t properly format them. If you want to see the formatted version of the pages, templates, and menus json files, I would recommend using this sublime package https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify
  4. How do I add these gulp tasks to an existing project?
    • If you have already started a project, but haven’t scaffolded to UAT then you can follow these steps: