HubSpot Ideas

arinker

Livereload for Design Manager

To keep the files of a theme organized you have to split them into many files and include them via {% include %} and {% import %} into the main file.

/* style.css */
{% import "Custom/page/css/settings.css" as settings %}
{% import "Custom/page/css/macros.css" as macros %}
{% include "Custom/page/css/custom.css" %}

 

/* main.js */
{% include "Custom/page/js/custom.js" %}

 

Everytime you make a change on an imported or included file you have to execute the following manual steps:

  1. Save the File
  2. Publish the File
  3. Save the Main File
  4. Publish the Main File (https://btyrd.de/2wpgNAI)
  5. Refresh the browser or browsers

During development you have to repeat these steps many thousand times. That is not only tedious but a huge waste of time.

 

With liverreload you just have to save the file (http://livereload.com/)!

 

In modern html stacks it is a standard to provide a file watcher and live reload function.

1 Reply
kleonard
HubSpot Product Team