Emil Österlund

Hantera frontend assets med Makefiler

Det började med att vi diskuterade att Grunt och Gulp drar in så OERHÖRT många dependencies när man ska använda. Och att deras configfiler ofta lämnar en del övrigt att önska. Och så frågade min kollega: Varför kör man bara inte Makefiler?

Makefiler har länge varit en standard för att bygga projekt i andra språk. Det har inte använts i någon större utrsträckning inom webbutveckling. Men i samband med att vi började titta på ny tool-chains och standardisera några av våra projekt så provade vi köra makefiler. Vi slängde ut Gulp/Grunt och körde helt enkelt bara npm och makefil.

Så här ser en simpel Makefil ut:


all: css js
dep:
	npm install less less-plugin-clean-css uglify-js watch

css:
	node_modules/.bin/lessc assets/less/main.less www/app/themes/Popcorn/assets/css/style.css
	node_modules/.bin/lessc assets/less/main.less www/app/themes/Popcorn/assets/css/style.min.css --clean-css="--s1 --advanced --compatibility=ie8" --source-map

js:
	cat assets/js/*.js | node_modules/.bin/uglifyjs -o www/app/themes/Popcorn/assets/js/app.min.js

watch:
	node_modules/.bin/watch "make all" assets/less/


Fördelarna är flera.

  • Betydligt färre dependencies än om du kör Grunt/Gulp. (106 för makefilen, 1113(!!!) för ett Gulpprojekt som använder elixir och 295 för ett vanligt gulpprojekt)
  • Enklare syntax. Mer kommandon rätt upp och ner
  • Går lättare att göra saker som inte är standard npm. bash, curl - vad du nu behöver göra.

Nackdelar:

  • Den enda riktiga nackdelen vi har hittat är att vårat exempel ovan inte stöds i Windows. Men ingen har väl utvecklat i windows sedan 2003 ändå? Eller? :)

Vad tycker du?

Kommentarer

Yggdrasil
Tack för info! Detta ska jag pröva i mitt nästa projekt!