Skip to content

Commit ba8e68d

Browse files
committed
Minor tweaks
1 parent 1a9b1e3 commit ba8e68d

File tree

4 files changed

+16
-19
lines changed

4 files changed

+16
-19
lines changed

integration.md

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ For our examples, we'll assume the following `rev-manifest.json`:
1212
}
1313
```
1414

15-
1615
## Approach #1 - Generate index.html during build
1716

1817
One approach to working with `rev-manifest.json` is to use a templating language, such as [handlebars](http://handlebarsjs.com), to generate an `index.html` file which contained your fingerprinted files embedded into the page.
@@ -38,33 +37,32 @@ The idea is to read in your app's `rev-manifest.json`, and use the non-fingerpri
3837
#### `gulpfile.js`
3938

4039
```js
41-
const fs = require('fs');
42-
const gulp = require('gulp');
43-
const handlebars = require('gulp-compile-handlebars');
44-
const rename = require('gulp-rename');
40+
import fs from 'node:fs';
41+
import gulp from 'gulp';
42+
import handlebars from 'gulp-compile-handlebars';
43+
import rename from 'gulp-rename';
4544

4645
// Create a handlebars helper to look up
4746
// fingerprinted asset by non-fingerprinted name
48-
const handlebarOpts = {
47+
const handlebarOptions = {
4948
helpers: {
5049
assetPath: (path, context) => ['/assets', context.data.root[path]].join('/')
5150
}
5251
};
5352

54-
exports['compile-index-html'] = () => {
53+
export const compileIndexHtml = () => {
5554
// Read in our manifest file
5655
const manifest = JSON.parse(fs.readFileSync('path/to/rev-manifest', 'utf8'));
5756

5857
// Read in our handlebars template, compile it using
5958
// our manifest, and output it to index.html
6059
return gulp.src('index.hbs')
61-
.pipe(handlebars(manifest, handlebarOpts))
60+
.pipe(handlebars(manifest, handlebarOptions))
6261
.pipe(rename('index.html'))
6362
.pipe(gulp.dest('public'));
6463
};
6564
```
6665

67-
6866
## Approach #2 - AJAX in manifest, inject assets into the page
6967

7068
Another approach would be to make a AJAX request to get the manifest JSON blob, then use the manifest to programmatically find the fingerprinted path to any given asset.
@@ -75,23 +73,22 @@ For example, if you wanted to include your JavaScript files into the page:
7573
$.getJSON('/path/to/rev-manifest.json', manifest => {
7674
const s = document.getElementsByTagName('script')[0];
7775

78-
const assetPath = src => {
79-
src = `js/${src}.js`;
80-
return ['/assets', manifest[src]].join('/');
76+
const assetPath = source => {
77+
source = `js/${source}.js`;
78+
return ['/assets', manifest[source]].join('/');
8179
};
8280

83-
for (const src of ['lib', 'app']) {
81+
for (const source of ['lib', 'app']) {
8482
const element = document.createElement('script');
8583
element.async = true;
86-
element.src = assetPath(src);
84+
element.src = assetPath(source);
8785
s.parentNode.insertBefore(element, s);
8886
}
8987
})
9088
```
9189

9290
The above example assumes your assets live under `/assets` on your server.
9391

94-
9592
## Approach #3 - PHP reads the manifest and provides asset names
9693

9794
This example PHP function provides the correct filename by reading it from the JSON manifest.

license

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) Sindre Sorhus <[email protected]> (sindresorhus.com)
3+
Copyright (c) Sindre Sorhus <[email protected]> (https://sindresorhus.com)
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
66

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"author": {
99
"name": "Sindre Sorhus",
1010
"email": "[email protected]",
11-
"url": "sindresorhus.com"
11+
"url": "https://sindresorhus.com"
1212
},
1313
"type": "module",
1414
"exports": "./index.js",

readme.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ Make sure to set the files to [never expire](http://developer.yahoo.com/performa
99

1010
## Install
1111

12-
```
13-
$ npm install --save-dev gulp-rev
12+
```sh
13+
npm install --save-dev gulp-rev
1414
```
1515

1616
## Usage

0 commit comments

Comments
 (0)