Skip to content

Commit

Permalink
Minor tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
sindresorhus committed Dec 12, 2022
1 parent 1a9b1e3 commit ba8e68d
Show file tree
Hide file tree
Showing 4 changed files with 16 additions and 19 deletions.
27 changes: 12 additions & 15 deletions integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ For our examples, we'll assume the following `rev-manifest.json`:
}
```


## Approach #1 - Generate index.html during build

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.
Expand All @@ -38,33 +37,32 @@ The idea is to read in your app's `rev-manifest.json`, and use the non-fingerpri
#### `gulpfile.js`

```js
const fs = require('fs');
const gulp = require('gulp');
const handlebars = require('gulp-compile-handlebars');
const rename = require('gulp-rename');
import fs from 'node:fs';
import gulp from 'gulp';
import handlebars from 'gulp-compile-handlebars';
import rename from 'gulp-rename';

// Create a handlebars helper to look up
// fingerprinted asset by non-fingerprinted name
const handlebarOpts = {
const handlebarOptions = {
helpers: {
assetPath: (path, context) => ['/assets', context.data.root[path]].join('/')
}
};

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

// Read in our handlebars template, compile it using
// our manifest, and output it to index.html
return gulp.src('index.hbs')
.pipe(handlebars(manifest, handlebarOpts))
.pipe(handlebars(manifest, handlebarOptions))
.pipe(rename('index.html'))
.pipe(gulp.dest('public'));
};
```


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

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.
Expand All @@ -75,23 +73,22 @@ For example, if you wanted to include your JavaScript files into the page:
$.getJSON('/path/to/rev-manifest.json', manifest => {
const s = document.getElementsByTagName('script')[0];

const assetPath = src => {
src = `js/${src}.js`;
return ['/assets', manifest[src]].join('/');
const assetPath = source => {
source = `js/${source}.js`;
return ['/assets', manifest[source]].join('/');
};

for (const src of ['lib', 'app']) {
for (const source of ['lib', 'app']) {
const element = document.createElement('script');
element.async = true;
element.src = assetPath(src);
element.src = assetPath(source);
s.parentNode.insertBefore(element, s);
}
})
```

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


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

This example PHP function provides the correct filename by reading it from the JSON manifest.
Expand Down
2 changes: 1 addition & 1 deletion license
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

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

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:

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"author": {
"name": "Sindre Sorhus",
"email": "[email protected]",
"url": "sindresorhus.com"
"url": "https://sindresorhus.com"
},
"type": "module",
"exports": "./index.js",
Expand Down
4 changes: 2 additions & 2 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ Make sure to set the files to [never expire](http://developer.yahoo.com/performa

## Install

```
$ npm install --save-dev gulp-rev
```sh
npm install --save-dev gulp-rev
```

## Usage
Expand Down

0 comments on commit ba8e68d

Please sign in to comment.