NPM-Script statt Gulp oder Grunt – automatisierte Webentwicklung in schön

Will man heutzutage ein Projekt für den Browser realisieren gehören Dinge wie das Minifizieren und Optimieren einzelner Javascript-, CSS- und HTML-Dateien bereits zum guten Ton. Kommen dann noch Code-Linter, Unit-Tests und Programme wie Browserify hinzu, ist es bald sehr aufwändig alle diese Schritte und zugehörigen Tools immer wieder manuell auszuführen.

Die Entwickler-Einstellung:

Faulheit ist dein bester Freund. Mach niemals Dinge zweimal, wenn du Sie beim ersten Mal automatisieren kannst!

Bei der Suche nach Automatisierung stößt man schnell auf Tools wie Grunt oder Gulp. Beides sind Möglichkeiten wiederkehrende Prozesse zu automatisieren, allerdings mit ein paar Haken:

1. zu aufgebläht:
Möchte man beispielsweise nur Javascript Dateien minimieren, so benötigt man mit der Hilfe von Grunt folgendes:

  • die grunt-cli zur Steuerung
  • eine Installation der Grunt Runtime innerhalb des Projekts
  • das Plugin zur Minimierung der Javascript Dateien
  • eine Gruntfile für die Konfiguration des ganzen Ablaufs

Ähnlich muss man auch mit Gulp verfahren.

2. abhängig von Plugins:
Grundsätzlich sind Plugins was tolles, vor allem wenn sie:

  • funktionieren
  • einfach zu benutzen sind
  • gepflegt werden

Beschränkt man sich auf die offiziellen Plugins, so wird man alle drei Punkte erfüllt finden, allerdings will man schnell mehr. Bei Drittanbieter-Plugins treffen diese Punkte oft nur teilweise oder auch gar nicht zu. Jeder WordPress Nutzer wird wissen wie nah Spaß und Frust bei der Nutzung von Plugins zusammen liegen.

3. zusätzliche Fehlerquellen
Zusätzliche Programme oder Abstraktionsebenen schaffen immer auch Raum für Fehler, die durch falsche Benutzung, fehlerhafte Programme oder die genutzten Plugins verursacht werden.

Die Lösung: NPM als Task-Runner

Um nun so viel unnötigen Ballast wie möglich los zu werden, warum nicht das CLI-Tool benutzen das bei jeder Node.js Installation mitgeliefert wird? NPM! Die Nutzung erfolgt über die CLI-Eingabe von Programmen wie zum Beispiel „UglifyJS„, „CleanCSS“ oder „Browserify“ in Verbindung mit der in der „package.json“ vorhandenen Möglichkeit „scripts“ zu definieren.

Ein paar Beispiele

Javascript Code mit UglifyJS optimieren

{
  "name": "npm-scripts-demo",
  "version": "0.1.0",
  “description": "a Demo for NPM Scripts",
  "scripts": {
    "build:js": "uglifyjs ./src/js/main.js -c -v -o ./dist/js/main.min.js"
  }
}

Ausgeführt wird das ganze nun über die Kommandozeile:

$ npm run build:js

CSS verkleinern

{
  "name": "npm-scripts-demo",
  "version": "0.1.0",
  “description": "a Demo for NPM Scripts",
  "scripts": {
    "build:css": "cleancss -o ./dist/css/main.min.css ./src/css/main.css"
  }
}

Um die Ausführung zu starten muss man nur noch einen Befehl abfeuern:

$ npm run build:css 


Veränderungen mit deinem NPM-Script überwachen

Da man nicht andauernd die einzelnen Scripte starten möchte, definieren wir einen sogenannten „watch“ Task. Hierzu bietet sich das Programm „nodemon“ an. Dieses Tool läuft ebenfalls über die Kommandozeile, überwacht alle Dateien und bietet die Möglichkeit, Aktionen bei Änderungen zu definieren.

Am Beispiel sieht das Ganze folgendermaßen aus:

{
  "name": "npm-scripts-demo",
  "version": "0.1.0",
  “description": "a Demo for NPM Scripts",
  "scripts": {

    "watch": "npm run watch:js & npm run watch:css",
      "watch:js" : "nodemon -e js -w ./src/js/ -x 'npm run build:js'",
      "watch:css": "nodemon -e less -w ./src/css/ -x 'npm run build:css",

    "build:js" : "uglifyjs ./src/js/main.js -c -v -o ./dist/js/main.min.js",
    "build:css": "cleancss -o ./dist/css/main.min.css ./src/css/main.css"
  }
}

Und um die Ausführung der Dateiüberwachung zu starten:

$ npm run watch

Ein etwas komplexeres Beispiel hat Richard auf seinem Github Account zur Verfügung gestellt

Hast du Anmerkungen? Fragen? Wünsche? Der Kommentarbereich ist das, was du suchst!

Michael Röber
  • Kauf dem Autor einen Kaffee :-)

Aloha! Mein Name ist Michael, ich bin Webworker, Gamer, Geek und Vater in Halle an der Saale. Ich mag Bits und Bytes, aber keinen Broccoli.

Veröffentlich unter EntwicklungVerschlagwortet mit , , , , ,

3 Antworten zu „NPM-Script statt Gulp oder Grunt – automatisierte Webentwicklung in schön

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.