stapetro / stapetro.github.io

stapetro Blog

Welcome to stapetro's blog

Table of Contents

• Tools
  • Node version Manager (NVM)
  • Install node and npm
  • Docker
• Build
  • Install dependencies
  • Modernizr JS lib
  • Build all
  • Run a specific test suite
  • Generate jekyll site
  • Generate favicon
• Performance

Instructions apply only for Linux/POSIX based OS. I use Ubuntu 18.04.4 LTS (bionic).

Tools

Node version manager

Install nvm (v0.35.2).

Install node and npm

nvm install 12.14.1 --lts=erbium --latest-npm
nvm --version
# 0.35.2
node --version
# v12.14.1
npm --version
# 6.14.5

npx comes with latest npm versions by default.

Docker

Follow official Docker installation guide.

Build

Install dependencies

(cd src && npm install)

Modernizr JS lib

Use modernizr CLI to build a minified JS version.

(cd src && \
npx modernizr -c modernizr-config.json -d ../assets/js/modernizr.min.js)

Build all

Runs static code analysis, tests and webpack bundling of JS files and CSS / SASS styles.

(cd src && npm run lint && npm test && npm run bundle && echo 'Successful build')
# or with test coverage included
(cd src && npm run lint && npm run test:coverage && npm run bundle && echo 'Successful build')

Run a specific test suite

$ cd src
$ npx jest --verbose --runTestsByPath ./main/headerLink.test.js

Generate jekyll site

Bash

$ cd <project_root_dir>
# generate only
$ src/scripts/docker_jekyll.sh build
# generate and serve jekyll site
$ src/scripts/docker_jekyll.sh serve

Powershell

PS> cd <project_root_dir>
# generate only
PS> .\src\scripts\docker_jekyll.ps1 "Build"
# generate and serve jekyll site
PS> .\src\scripts\docker_jekyll.ps1 "Serve"

Generate favicon

Favicons are generated from code monkey image by free favicon generator website.

Performance

Bundle analyzer

I use webpack bundle analyzer.

Remove unused JS modules

Import explicitly foundation modules.

Remove unused CSS styles