Skip to content

Commit 3b8b8fa

Browse files
metonymmetonym
authored
Merge pull request #42 from posthtml/v1
v1
2 parents c511acb + 2ccdefc commit 3b8b8fa

22 files changed

Lines changed: 571 additions & 3735 deletions

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.DS_Store
22
/.vscode
3-
/coverage
43
/lib
54
/node_modules
5+
/src/tests/__fixtures__/processed
66
yarn-debug.log*
77
yarn-error.log*

‎.travis.yml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
language: node_js
22
node_js: 8
33
cache: yarn
4-
after_success: npx codecov
4+
scripts:
5+
- yarn test
6+
- yarn prepack

‎CHANGELOG.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## Unreleased
99

10-
- Add optional files field to options parameter that matches specific file names
10+
<!--
11+
## [1.0.0](https://github.com/metonym/posthtml-hash/releases/tag/v1.0.0) - 2020-05-09
1112
12-
- Incorporate the `[hash:number]` format to specify the hash length
13+
- Replace `jest` with Node.js native `assert` (removes ~250k sub-dependencies) -->
1314

1415
## [0.3.0](https://github.com/metonym/posthtml-hash/releases/tag/v0.3.0) - 2020-05-04
1516

‎README.md‎

Lines changed: 69 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22

33
[![NPM][npm]][npm-url]
44

5-
`posthtml-hash` is a [PostHTML](https://github.com/posthtml/posthtml) plugin for hashing static CSS/JS assets to enable caching. [hasha](https://www.npmjs.com/package/hasha) is used to generate hashes.
5+
`posthtml-hash` is a [PostHTML](https://github.com/posthtml/posthtml) plugin for hashing static assets to enable caching.
66

77
```diff
88
<html>
99
<head>
10-
- <link rel="stylesheet" href="stylesheet.css" />
11-
+ <link rel="stylesheet" href="stylesheet.9a6cf95c41e87b9dc102.css" />
10+
- <link rel="stylesheet" href="styles.[hash].css" />
11+
+ <link rel="stylesheet" href="styles.9a6cf95c41e87b9dc102.css" />
1212
</head>
1313
<body>
14-
- <script src="main.js"></script>
15-
+ <script src="main.b0dcc67ffc1fd562f212.js"></script>
14+
- <script src="src.[hash].js"></script>
15+
+ <script src="src.b0dcc67ffc1fd562f212.js"></script>
1616
</body>
1717
</html>
1818
```
@@ -22,61 +22,90 @@
2222
```bash
2323
yarn add -D posthtml-hash
2424
# OR
25-
npm i posthtml-hash
25+
npm i -D posthtml-hash
2626
```
2727

2828
## Usage
2929

30+
### Input
31+
32+
The plugin will only attempt to hash files with `[hash]` in the name.
33+
34+
```html
35+
<html>
36+
<head>
37+
<!-- not hashed -->
38+
<link rel="stylesheet" href="reset.css" />
39+
40+
<!-- hashed -->
41+
<link rel="stylesheet" href="style.[hash].css" />
42+
</head>
43+
<body>
44+
<!-- not hashed -->
45+
<script src="analytics.js"></script>
46+
47+
<!-- hashed -->
48+
<script src="src.[hash].js"></script>
49+
</body>
50+
</html>
51+
```
52+
53+
### Node.js
54+
55+
The recommended usage is to hash static assets in your post-build process using Node.js.
56+
57+
Let's say that you use Rollup to bundle and minify your CSS and JavaScript. The template `index.html` is copied to the `build` folder.
58+
59+
A post-build script could look like:
60+
3061
```js
62+
// postbuild.js
3163
const fs = require("fs");
3264
const posthtml = require("posthtml");
3365
const { hash } = require("posthtml-hash");
3466

35-
const html = fs.readFileSync("./index.html");
67+
const html = fs.readFileSync("./build/index.html");
3668

3769
posthtml()
38-
.use(hash())
70+
.use(hash({ path: "build" }))
3971
.process(html)
40-
.then((result) => fs.writeFileSync("./index.html", result.html));
72+
.then((result) => fs.writeFileSync("./build/index.html", result.html));
4173
```
4274

43-
## Options
75+
For convenience, you can add the post-build script to your package.json. The `postbuild` script is automatically invoked following the `build` script.
76+
77+
```json
78+
{
79+
"scripts": {
80+
"build": "rollup -c",
81+
"postbuild": "node postbuild.js"
82+
}
83+
}
84+
```
85+
86+
### Options
4487

4588
This plugin assumes that the file to process is in the same directory as the posthtml script. If not, specify the relative path to the html file in `options.path`:
4689

4790
```js
48-
const fs = require("fs");
49-
const posthtml = require("posthtml");
50-
const { hash } = require("posthtml-hash");
91+
hash({
92+
/**
93+
* Relative path to processed HTML file
94+
*/
95+
path: "public", // default: ""
96+
});
97+
```
5198

52-
const html = fs.readFileSync("./public/index.html");
99+
### Custom Hash Length
53100

54-
posthtml()
55-
.use(
56-
hash({
57-
/**
58-
* Relative path to processed HTML file
59-
*/
60-
path: "public", // default: ""
61-
62-
/**
63-
* Length of hash
64-
*/
65-
hashLength: 10, // default: 20
66-
67-
/**
68-
* Hash CSS files
69-
*/
70-
css: true, // default: true
71-
72-
/**
73-
* Hash JS files
74-
*/
75-
js: true, // default: true
76-
})
77-
)
78-
.process(html)
79-
.then((result) => fs.writeFileSync("./index.html", result.html));
101+
Customize the hash length by specifying an integer after the `hash:{NUMBER}`. The default hash length is `20`.
102+
103+
```html
104+
<script src="src.[hash].js"></script>
105+
<!-- src.b0dcc67ffc1fd562f212.js -->
106+
107+
<script src="src.[hash:8].js"></script>
108+
<!-- src.b0dcc67f.js -->
80109
```
81110

82111
## [Examples](examples)

‎docs/v0.3.0.md‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
# posthtml-hash <img align="right" width="220" height="200" title="PostHTML logo" src="http://posthtml.github.io/posthtml/logo.svg">
2+
3+
> Documentation for v0.3.0.
4+
5+
[![NPM][npm]][npm-url]
6+
7+
`posthtml-hash` is a [PostHTML](https://github.com/posthtml/posthtml) plugin for hashing static CSS/JS assets to enable caching. [hasha](https://www.npmjs.com/package/hasha) is used to generate hashes.
8+
9+
```diff
10+
<html>
11+
<head>
12+
- <link rel="stylesheet" href="stylesheet.css" />
13+
+ <link rel="stylesheet" href="stylesheet.9a6cf95c41e87b9dc102.css" />
14+
</head>
15+
<body>
16+
- <script src="main.js"></script>
17+
+ <script src="main.b0dcc67ffc1fd562f212.js"></script>
18+
</body>
19+
</html>
20+
```
21+
22+
## Install
23+
24+
```bash
25+
yarn add -D posthtml-hash
26+
# OR
27+
npm i posthtml-hash
28+
```
29+
30+
## Usage
31+
32+
```js
33+
const fs = require("fs");
34+
const posthtml = require("posthtml");
35+
const { hash } = require("posthtml-hash");
36+
37+
const html = fs.readFileSync("./index.html");
38+
39+
posthtml()
40+
.use(hash())
41+
.process(html)
42+
.then((result) => fs.writeFileSync("./index.html", result.html));
43+
```
44+
45+
## Options
46+
47+
This plugin assumes that the file to process is in the same directory as the posthtml script. If not, specify the relative path to the html file in `options.path`:
48+
49+
```js
50+
const fs = require("fs");
51+
const posthtml = require("posthtml");
52+
const { hash } = require("posthtml-hash");
53+
54+
const html = fs.readFileSync("./public/index.html");
55+
56+
posthtml()
57+
.use(
58+
hash({
59+
/**
60+
* Relative path to processed HTML file
61+
*/
62+
path: "public", // default: ""
63+
64+
/**
65+
* Length of hash
66+
*/
67+
hashLength: 10, // default: 20
68+
69+
/**
70+
* Hash CSS files
71+
*/
72+
css: true, // default: true
73+
74+
/**
75+
* Hash JS files
76+
*/
77+
js: true, // default: true
78+
})
79+
)
80+
.process(html)
81+
.then((result) => fs.writeFileSync("./index.html", result.html));
82+
```
83+
84+
## [Examples](examples)
85+
86+
## Contributing
87+
88+
See the [PostHTML Guidelines](https://github.com/posthtml/posthtml/tree/master/docs).
89+
90+
## [Changelog](CHANGELOG.md)
91+
92+
## License
93+
94+
[MIT](LICENSE)
95+
96+
[npm]: https://img.shields.io/npm/v/posthtml-hash.svg?color=blue
97+
[npm-url]: https://npmjs.com/package/posthtml-hash

‎package.json‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,22 @@
44
"license": "MIT",
55
"description": "PostHTML plugin for hashing static assets",
66
"author": "Eric Liu (https://github.com/metonym)",
7-
"main": "lib/index.js",
8-
"types": "lib/index.d.ts",
7+
"main": "lib/plugin.js",
8+
"types": "lib/plugin.d.ts",
99
"scripts": {
10-
"develop": "tsc -w",
11-
"test": "jest --coverage",
12-
"test:tdd": "jest --watch",
10+
"test": "tsnd src/tests",
11+
"test:tdd": "tsnd --respawn src/tests",
1312
"prepack": "tsc"
1413
},
1514
"dependencies": {
1615
"hasha": "^5.0.0",
1716
"posthtml": "^0.12.0"
1817
},
1918
"devDependencies": {
20-
"@types/jest": "^25.2.1",
21-
"jest": "^25.5.4",
22-
"ts-jest": "^25.4.0",
19+
"@types/node": "^13.13.5",
20+
"ts-node-dev": "^1.0.0-pre.44",
2321
"typescript": "^3.6.3"
2422
},
25-
"jest": {
26-
"preset": "ts-jest",
27-
"watchPathIgnorePatterns": [
28-
"<rootDir>/src/tests/__fixtures__"
29-
]
30-
},
3123
"repository": {
3224
"type": "git",
3325
"url": "https://github.com/metonym/posthtml-hash.git"

‎src/global.d.ts‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/index.ts‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

0 commit comments

Comments
 (0)