how an old fart builds JS, JSX, SCSS, and lints them plus PHP for a WP theme

composer.json

{
	"require-dev": {
		"phpcompatibility/php-compatibility": "*",
		"squizlabs/php_codesniffer": "*",
		"dealerdirect/phpcodesniffer-composer-installer": "*",
		"asm89/twig-lint": "*"
	},
	"prefer-stable" : true,
	"config": {
		"allow-plugins": {
			"dealerdirect/phpcodesniffer-composer-installer": true
		}
	}
}

Makefile

.PHONY: all favicons lint lint-js lint-php lint-twig lint-css css-compile css-postcss

all:
	@echo please see Makefile for available builds / commands

# optimise branding tiles and build the favicon

FAVICON_DIR	:= images/favicons

favicons: $(FAVICON_DIR)/favicon.ico

$(FAVICON_DIR)/favicon.ico: $(FAVICON_DIR)/*.png
	cd $(FAVICON_DIR); optipng -o7 *.png; convert favicon*.png favicon.ico

# check for broken links

URL_DEV		:= https://the-local-site
URL_TEST	:= https://site.example.dev
URL_LIVE	:= https://site.example.com
URL_CHECK	:= $(URL_DEV)
USER_AGENT	:= Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:93.0) Gecko/20100101 Firefox/93.0

check-links:
	muffet -c 4 -f --header="User-Agent: $(USER_AGENT)" --skip-tls-verification \
		-e "fonts\.googleapis\.com|myfonts" \
		-e "(twitter|facebook|instagram|linkedin)\.com" \
		-e "$(URL_CHECK)/xmlrpc\.php" \
		-e "$(URL_CHECK)/wp-json/oembed/.*" \
		-e "$(URL_CHECK)/wp-json/wp/.*" \
		-e "$(URL_CHECK)/\?p=[0-9]+" \
		-e "cdn-cgi\/l\/email-protection" \
		-e "/favicons/" \
		-e "\.webp" \
		$(URL_CHECK)

# build JavaScript targets

JS_SRC_DIR		:= source/js
JS_TGT_DIR		:= static/js
JS_SRCS			:= $(shell find $(JS_SRC_DIR) -name '*.js' -print)
JS_TGTS			:= $(subst $(JS_SRC_DIR),$(JS_TGT_DIR),$(JS_SRCS))

JSX_SRC_DIR		:= source/jsx
JSX_TGT_DIR		:= static/js
JSX_SRCS		:= $(shell find $(JSX_SRC_DIR) -name '*.jsx' -print)
JSX_TGTS		:= $(JSX_SRCS:$(JSX_SRC_DIR)/%.jsx=$(JSX_TGT_DIR)/%.js)

js: $(JS_TGTS) $(JSX_TGTS)

$(JS_TGTS): $(JS_TGT_DIR)/%.js: $(JS_SRC_DIR)/%.js
	npx babel --source-type script --presets @babel/preset-env --out-file $@ $<
	npx uglify-js $@ --output $(basename $@).min.js -b beautify=false,ascii_only -c -m

$(JSX_TGTS): $(JSX_TGT_DIR)/%.js: $(JSX_SRC_DIR)/%.jsx
	npx babel --source-type script --plugins transform-react-jsx --presets @babel/preset-env --out-file $@ $<
	npx uglify-js $@ --output $(basename $@).min.js -b beautify=false,ascii_only -c -m

# build CSS targets

CSS_SRC_DIR		:= source/scss
CSS_TGT_DIR		:= static/css
CSS_SRCS		:= $(shell find source/scss -maxdepth 1 -name '[a-z]*.scss' -printf '%f ')
CSS_TGTS		:= $(CSS_SRCS:%.scss=$(CSS_TGT_DIR)/%.min.css)

css: $(CSS_TGTS)

css-compile:
	@echo Sass...
	@sass $(foreach source,$(CSS_SRCS),$(CSS_SRC_DIR)/$(source):$(source:%.scss=$(CSS_TGT_DIR)/%.dev.css)) --style=expanded --no-charset

css-postcss:
	@echo Autoprefixer...
	@npx postcss $(CSS_TGTS:%.min.css=%.dev.css) --use autoprefixer --replace --map

$(CSS_TGTS): $(CSS_TGT_DIR)/%.min.css: $(CSS_SRC_DIR)/%.scss lint-css css-compile css-postcss
	@echo Optimising $*...
	@npx cleancss -O2 --format beautify --source-map --with-rebase --output $(CSS_TGT_DIR)/$*.dev.css $(CSS_TGT_DIR)/$*.dev.css
	@npx cleancss -O2 --output $@ $(CSS_TGT_DIR)/$*.dev.css

# code linters

lint: lint-js lint-twig lint-php lint-css

lint-js:
	@echo JavaScript lint...
	@npx eslint --ext js,jsx $(JS_SRC_DIR) $(JSX_SRC_DIR)

lint-twig:
	@echo Twig lint...
	@vendor/bin/twig-lint lint views | grep -Ev '^OK'; test $$? -eq 1 && exit 0; exit 1

lint-php:
	@echo PHP lint...
	@find . -path ./vendor -prune -o -path ./node_modules -prune -o -name '*.php' -exec php -l '{}' \; >/dev/null
	@vendor/bin/phpcs -ps

lint-css:
	@echo CSS lint...
	@npx stylelint --config .stylelintrc.yml "$(CSS_SRC_DIR)/**/*.scss"

package.json

{
	"name": "example-project",
	"version": "1.0.0",
	"browserslist": [
		"> 0.5%",
		"not dead"
	],
	"author": "WebAware https://shop.webaware.com.au/",
	"private": true,
	"dependencies": {
		"@fortawesome/fontawesome-pro": "^5.15"
	},
	"devDependencies": {
		"@babel/cli": "^7.17.10",
		"@babel/core": "^7.18.0",
		"@babel/preset-env": "^7.18.0",
		"autoprefixer": "^10.4.7",
		"babel-plugin-transform-react-jsx": "^6.24.1",
		"babel-preset-react": "^6.24.1",
		"clean-css-cli": "^5.6.0",
		"eslint": "^8.15.0",
		"eslint-plugin-react": "^7.30.0",
		"postcss-cli": "^9.1.0",
		"stylelint": "^14.8.2",
		"stylelint-config-standard-scss": "^3.0.0",
		"uglify-js": "^3.15.5"
	}
}