Skip to content

Commit d167a97

Browse files
bmuenzenmeyerbmuenzenmeyer
committed
cacheBust support
1 parent db06056 commit d167a97

File tree

6 files changed

+56
-25
lines changed

6 files changed

+56
-25
lines changed

‎README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,16 @@ Pattern states should be lowercase and use hyphens where spaces are present.
164164

165165
Coupled with exported css (much easier to extract with existing tools like [grunt-contrib-copy](https://github.com/gruntjs/grunt-contrib-copy)), pattern export can help to maintain the relevancy of the design system by directly placing partials in a directory of your choosing.
166166

167+
##### cacheBust
168+
`config.json` has this flag to instruct Pattern Lab to append a unique query string to Javascript and CSS assets throughout the frontend.
169+
170+
```
171+
"cacheBust": true
172+
```
173+
174+
Default: true
175+
176+
167177
##### baseurl
168178

169179
If your instance of Pattern Lab lives in a subdirectory of your server, for instance on github pages (ex: yourusername.github.io/patterns-demo/), then add the baseurl here. The baseurl is everything after the hostname - ie: `patterns-demo`

‎config.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,5 +53,6 @@
5353
},
5454
"patternExportKeys": [],
5555
"patternExportDirectory": "./pattern_exports/",
56-
"baseurl" : ""
56+
"baseurl" : "",
57+
"cacheBust": true
5758
}

‎core/lib/patternlab.js

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,17 @@ var patternlab_engine = function (config) {
5454
}
5555
}
5656

57+
function setCacheBust() {
58+
if (patternlab.config.cacheBust) {
59+
if (patternlab.config.debug) {
60+
console.log('setting cacheBuster value for frontend assets.');
61+
}
62+
patternlab.cacheBuster = new Date().getTime();
63+
} else {
64+
patternlab.cacheBuster = 0;
65+
}
66+
}
67+
5768
function buildPatterns(deletePatternDir) {
5869
patternlab.data = fs.readJSONSync(path.resolve(paths.source.data, 'data.json'));
5970
patternlab.listitems = fs.readJSONSync(path.resolve(paths.source.data, 'listitems.json'));
@@ -64,6 +75,8 @@ var patternlab_engine = function (config) {
6475
patternlab.partials = {};
6576
patternlab.data.link = {};
6677

78+
setCacheBust();
79+
6780
var pattern_assembler = new pa(),
6881
entity_encoder = new he(),
6982
pattern_exporter = new pe(),
@@ -163,6 +176,10 @@ var patternlab_engine = function (config) {
163176
var allData = JSON.parse(JSON.stringify(patternlab.data));
164177
allData = pattern_assembler.merge_data(allData, pattern.jsonFileData);
165178

179+
//also add the cachebuster value. slight chance this could collide with a user that has defined cacheBuster as a value
180+
allData.cacheBuster = patternlab.cacheBuster;
181+
pattern.cacheBuster = patternlab.cacheBuster;
182+
166183
//render the pattern-specific header
167184
var headHtml = pattern_assembler.renderPattern(pattern.header, allData);
168185

@@ -249,6 +266,9 @@ var patternlab_engine = function (config) {
249266
styleguidePatterns = patternlab.patterns;
250267
}
251268

269+
//also add the cachebuster value. slight chance this could collide with a user that has defined cacheBuster as a value
270+
patternlab.data.cacheBuster = patternlab.cacheBuster;
271+
252272
//get the main page head and foot
253273
var mainPageHead = patternlab.userHead.extendedTemplate.replace('{% pattern-lab-head %}', patternlab.header);
254274
var mainPageHeadHtml = pattern_assembler.renderPattern(mainPageHead, patternlab.data);
@@ -257,7 +277,7 @@ var patternlab_engine = function (config) {
257277

258278
//build the styleguide
259279
var styleguideTemplate = fs.readFileSync(path.resolve(paths.source.patternlabFiles, 'templates/styleguide.mustache'), 'utf8'),
260-
styleguideHtml = pattern_assembler.renderPattern(styleguideTemplate, {partials: styleguidePatterns});
280+
styleguideHtml = pattern_assembler.renderPattern(styleguideTemplate, {partials: styleguidePatterns, cacheBuster: patternlab.cacheBuster});
261281

262282
fs.outputFileSync(path.resolve(paths.public.styleguide, 'html/styleguide.html'), mainPageHeadHtml + styleguideHtml + mainPageFootHtml);
263283

@@ -300,7 +320,7 @@ var patternlab_engine = function (config) {
300320
}
301321

302322
var viewAllTemplate = fs.readFileSync(path.resolve(paths.source.patternlabFiles, 'templates/viewall.mustache'), 'utf8');
303-
var viewAllHtml = pattern_assembler.renderPattern(viewAllTemplate, {partials: viewAllPatterns, patternPartial: patternPartial});
323+
var viewAllHtml = pattern_assembler.renderPattern(viewAllTemplate, {partials: viewAllPatterns, patternPartial: patternPartial, cacheBuster: patternlab.cacheBuster });
304324
fs.outputFileSync(paths.public.patterns + pattern.subdir.slice(0, pattern.subdir.indexOf(pattern.patternGroup) + pattern.patternGroup.length) + '/index.html', mainPageHead + viewAllHtml + mainPageFoot);
305325
}
306326

@@ -327,7 +347,7 @@ var patternlab_engine = function (config) {
327347
}
328348

329349
var viewAllTemplate = fs.readFileSync(path.resolve(paths.source.patternlabFiles, 'templates/viewall.mustache'), 'utf8');
330-
var viewAllHtml = pattern_assembler.renderPattern(viewAllTemplate, {partials: viewAllPatterns, patternPartial: patternPartial});
350+
var viewAllHtml = pattern_assembler.renderPattern(viewAllTemplate, {partials: viewAllPatterns, patternPartial: patternPartial, cacheBuster: patternlab.cacheBuster});
331351
fs.outputFileSync(paths.public.patterns + pattern.flatPatternPath + '/index.html', mainPageHeadHtml + viewAllHtml + mainPageFootHtml);
332352
}
333353
}
@@ -523,7 +543,7 @@ var patternlab_engine = function (config) {
523543
var viewAllPathsPartialHtml = pattern_assembler.renderPattern(viewAllPathsTemplate, {'viewallpaths': JSON.stringify(patternlab.viewAllPaths)});
524544

525545
//render the patternlab template, with all partials
526-
var patternlabSiteHtml = pattern_assembler.renderPattern(patternlabSiteTemplate, {}, {
546+
var patternlabSiteHtml = pattern_assembler.renderPattern(patternlabSiteTemplate, {cacheBuster: patternlab.cacheBuster}, {
527547
'ishControls': ishControlsPartialHtml,
528548
'patternNav': patternNavPartialHtml,
529549
'patternPaths': patternPathsPartialHtml,

‎core/templates/index.mustache

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@
1212
<meta http-equiv="pragma" content="no-cache" />
1313

1414
<meta name="viewport" content="width=device-width" />
15-
<link rel="stylesheet" href="styleguide/css/styleguide.css" media="all" />
16-
<link rel="stylesheet" href="styleguide/css/styleguide-specific.css" media="all" />
17-
<link rel="stylesheet" href="styleguide/css/vendor/typeahead.css" media="all" />
18-
<link rel="stylesheet" href="styleguide/css/vendor/prism.css" media="all" />
15+
<link rel="stylesheet" href="styleguide/css/styleguide.css?{{ cacheBuster }}" media="all" />
16+
<link rel="stylesheet" href="styleguide/css/styleguide-specific.css?{{ cacheBuster }}" media="all" />
17+
<link rel="stylesheet" href="styleguide/css/vendor/typeahead.css?{{ cacheBuster }}" media="all" />
18+
<link rel="stylesheet" href="styleguide/css/vendor/prism.css?{{ cacheBuster }}" media="all" />
1919
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
2020
<script>window.jQuery || document.write('<script src="styleguide/js/vendor/jquery.js"><\/script>')</script>
2121
</head>
@@ -86,17 +86,17 @@
8686
<div id="sg-comments-container"></div>
8787
</script>
8888

89-
<script src="styleguide/js/vendor/prism.js"></script>
90-
<script src="styleguide/js/vendor/jwerty.js"></script>
91-
<script src="styleguide/js/vendor/typeahead.bundle.min.js"></script>
92-
<script src="styleguide/js/data-saver.js"></script>
89+
<script src="styleguide/js/vendor/prism.js?{{ cacheBuster }}"></script>
90+
<script src="styleguide/js/vendor/jwerty.js?{{ cacheBuster }}"></script>
91+
<script src="styleguide/js/vendor/typeahead.bundle.min.js?{{ cacheBuster }}"></script>
92+
<script src="styleguide/js/data-saver.js?{{ cacheBuster }}"></script>
9393
{{> patternPaths }}
9494
{{> viewAllPaths }}
95-
<script src="styleguide/js/url-handler.js"></script>
96-
<script src="styleguide/js/styleguide.js"></script>
97-
<script src="styleguide/js/annotations-viewer.js "></script>
98-
<script src="styleguide/js/code-viewer.js "></script>
99-
<script src="styleguide/js/pattern-finder.js"></script>
95+
<script src="styleguide/js/url-handler.js?{{ cacheBuster }}"></script>
96+
<script src="styleguide/js/styleguide.js?{{ cacheBuster }}"></script>
97+
<script src="styleguide/js/annotations-viewer.js?{{ cacheBuster }}"></script>
98+
<script src="styleguide/js/code-viewer.js?{{ cacheBuster }}"></script>
99+
<script src="styleguide/js/pattern-finder.js?{{ cacheBuster }}"></script>
100100

101101
</body>
102102
</html>

‎core/templates/pattern-header-footer/footer.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

2-
<script src="../../styleguide/js/vendor/jwerty.js"></script>
3-
<script src="../../styleguide/js/postmessage.js"></script>
4-
<script src="../../data/annotations.js"></script>
5-
<script src="../../styleguide/js/annotations-pattern.js"></script>
6-
<script src="../../styleguide/js/code-pattern.js"></script>
2+
<script src="../../styleguide/js/vendor/jwerty.js?{{ cacheBuster }}"></script>
3+
<script src="../../styleguide/js/postmessage.js?{{ cacheBuster }}"></script>
4+
<script src="../../data/annotations.js?{{ cacheBuster }}"></script>
5+
<script src="../../styleguide/js/annotations-pattern.js?{{ cacheBuster }}"></script>
6+
<script src="../../styleguide/js/code-pattern.js?{{ cacheBuster }}"></script>

‎core/templates/pattern-header-footer/header.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@
55
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
66
<meta http-equiv="pragma" content="no-cache" />
77

8-
<link rel="stylesheet" href="../../styleguide/css/styleguide.css?" media="all">
9-
<link rel="stylesheet" href="../../styleguide/css/styleguide-specific.css" media="all" />
8+
<link rel="stylesheet" href="../../styleguide/css/styleguide.css?{{ cacheBuster }}" media="all">
9+
<link rel="stylesheet" href="../../styleguide/css/styleguide-specific.css?{{ cacheBuster }}" media="all" />

0 commit comments

Comments
 (0)