diff --git a/.github/workflows/deploy-preview.yml b/.github/workflows/deploy-preview.yml index 358c0f6..6433e21 100644 --- a/.github/workflows/deploy-preview.yml +++ b/.github/workflows/deploy-preview.yml @@ -47,6 +47,9 @@ jobs: - name: Build the website run: npm run build + - name: Optimize static content + run: npm run optimize + - name: Creating symlinks to old version run: | ln -s ../nightwatchjs.org out/v17 diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 3d5d592..ff46189 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -44,12 +44,12 @@ jobs: - name: Install dependencies run: npm install - - name: Prebuild #required ensure api pages are generated before the ejs files are processed - run: npm run prebuild - - name: Build the website run: npm run build + - name: Optimize static content + run: npm run optimize + - name: Creating symlinks to old version run: | ln -s ../nightwatchjs.org out/v17 diff --git a/build/optimize.js b/build/optimize.js new file mode 100644 index 0000000..d5c28da --- /dev/null +++ b/build/optimize.js @@ -0,0 +1,54 @@ +import {generate} from 'critical'; +import {minify} from 'html-minifier'; +import {readFileSync, writeFileSync} from 'fs'; +import path from 'path'; + +// Inline critical CSS +generate({ + inline: true, + base: 'out/', + src: 'index.html', + target: { + html: 'index.html', + uncritical: 'css/landing/style.css' + }, + dimensions: [ + { + height: 200, + width: 500 + }, + { + height: 900, + width: 1024 + }, + { + height: 900, + width: 1400 + } + ], + // ignore CSS rules + ignoreInlinedStyles: true +}).then(({css, html, uncritical}) => { + console.log('Critical CSS generated', css.length); + console.log('Uncritical CSS generated', uncritical.length); +}).catch(err => { + console.error('Critical CSS generation failed', err); +}).then(() => { + // Minify HTML + const htmlPath = path.resolve('out/index.html'); + const htmlContent = readFileSync(htmlPath, 'utf8'); + const minifiedHTMLContent = minify(htmlContent, { + collapseWhitespace: true, + collapseInlineTagWhitespace: true, + conservativeCollapse: true, + minifyCSS: true, + minifyJS: true, + removeComments: true, + useShortDoctype: true, + html5: true + }); + + writeFileSync(htmlPath, minifiedHTMLContent, 'utf8'); + console.log('Wrote minified HTML to', htmlPath, minifiedHTMLContent.length); +}); + diff --git a/build/optimize.mjs b/build/optimize.mjs deleted file mode 100644 index bbf24f2..0000000 --- a/build/optimize.mjs +++ /dev/null @@ -1,46 +0,0 @@ -import {generate} from 'critical'; -import {minify} from 'html-minifier'; -import {readFileSync, writeFileSync} from 'fs'; -import path from 'path'; - -// Inline critical CSS -generate({ - inline: true, - base: 'out/', - src: 'index.html', - target: { - html: 'index.html', - uncritical: 'css/landing/style.css' - }, - dimensions: [ - { - height: 200, - width: 500 - }, - { - height: 900, - width: 1024 - }, - { - height: 900, - width: 1400 - } - ], - // ignore CSS rules - ignoreInlinedStyles: true -}); - -// Minify HTML -const htmlPath = path.resolve('out/index.html'); -const htmlContent = readFileSync(htmlPath, 'utf8'); -const minifiedHTMLContent = minify(htmlContent, { - collapseWhitespace: true, - collapseInlineTagWhitespace: true, - conservativeCollapse: true, - minifyCSS: true, - minifyJS: true, - removeComments: true, - useShortDoctype: true, - html5: true -}); -writeFileSync(htmlPath, minifiedHTMLContent, 'utf8'); diff --git a/package.json b/package.json index b4d17e9..d20155d 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,8 @@ "serve": "postdoc preview", "clone:docs": "rm -rf nightwatch-docs/ && git clone https://github.com/nightwatchjs/nightwatch-docs.git", "clone:nightwatch": "rm -rf nightwatch/ && git clone https://github.com/nightwatchjs/nightwatch.git", - "build": "postdoc build && node build/optimize.mjs", + "build": "postdoc build", + "optimize": "node build/optimize.js", "netlify": "npm run clone:docs && npm run clone:nightwatch && npm run build", "partytown": "partytown copylib public/~partytown", "eslint": "eslint src test --quiet"