Skip to content

Instantly share code, notes, and snippets.

@remy
Last active March 15, 2022 00:57
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save remy/274232f8b47dfa163324 to your computer and use it in GitHub Desktop.
Save remy/274232f8b47dfa163324 to your computer and use it in GitHub Desktop.
The Makefile I'm using to compile .less file changes *when* the changes occur. Full write up: https://remysharp.com/makefile
# when you run `make` alone, run the `css` rule (at the
# bottom of this makefile)
all: css
# .PHONY is a special command, that allows you not to
# require physical files as the target (allowing us to
# use the `all` rule as the default target).
.PHONY: all
# replace all .less files with .css extension and cache
# the results in a variable called `css_files`
css_files := $(patsubst %.less, %.css, $(wildcard ./public/css/*.less))
# when a .css file is *not* up to date compared to the
# .less file, then make will run the the following commands:
# - echo the string "foo.less -> foo.css"
# - run the command `lessc -x --source-map foo.less foo.css`
./public/css/%.css: public/css/%.less
@echo "$< -> $@"
@./node_modules/.bin/lessc -x --source-map $< $@
css: $(css_files)
{
"name": "example app",
"scripts": {
"//": "I'm using `make` first, then running fswatch to pick up any changes up front",
"watch": "nodemon -q -w public/css -e less -x make"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment