Basic frontend makefile

Makefile

# this tells Make to run 'make help' if the user runs 'make'
# without this, Make would use the first target as the default
.DEFAULT_GOAL := help
  
# here we have a simple way of outputting documentation
# the @-sign tells Make to not output the command before running it
help:
	@echo 'Available commands:'
	@echo -e 'dev \t\t - \t run the development environment
	@echo -e 'prod \t\t - \t build for production

# setting a command up so we can run yarn before any other command
# this way our dependencies will always be up to date
yarn:
	yarn

# running 'make dev' will first run yarn
# then start Rollup and Sass in watch mode
dev: WATCH = --watch
dev: yarn build

# running 'make prod' will first run yarn
# then will clean up our old css build
# then will run Rollup and Sass for a production build
prod: export NODE_ENV = production
prod: yarn clean build

# the '-' before rm below allows that command to fail
# even if this fails, make will continue running
# this is a contrived example
clean:
	-rm ./dist/main.css

build: js css

js:
	npx rollup -c $(WATCH)

css:
	npx sass $(WATCH) main.scss ./dist/main.css