Suche
Close this search box.
Open-Source-Projekte und ihre Anwendungen
Marc Eggert

CSS und JavaScript mit NPM und Gulp organisieren

Bei den meisten Web-Projekten setze ich auf verschiedene externe Projekte und Frameworks. Sei es Bootstrap, JQuery oder FontAwesome und weitere Klassen oder Plugins. Meistens ist es dann ein Problem, die verschiedenen Versionen und externen Scripts auf einem aktuellen Stand zu halten, zu organisieren oder kontrollieren, welche Version untereinander notwendig ist, um alle AbhĂ€ngigkeiten (auch die des eigenen Projekts) zu erfĂŒllen.Um die jeweils aktuellen oder selbst gesetzten festen Versionen von Bootstrap & Co. zu halten, gibt es Nodejs/NPM. SĂ€mtliche Pakete werden dabei in ein Verzeichnis „node_modules“ installiert. Doch wie sieht eine praktikable Lösung aus, mittels welcher diese Bibliotheken im eigenen Web-Projekt gehalten werden?Genau hier kommt der „Workflow-Enhancer“ Gulp.js ins Spiel. Gulp sorgt dafĂŒr, dass die entscheidenden Scripts aus dem Verzeichnis node_modules in das eigene Web-Verzeichnis gefĂŒhrt werden (beispielsweise /js, /css, /fonts, etc.) und ggf. SASS–Code aus Bootstrap und eigenem Code in CSS kompiliert wird. Dazu ist in der DEV-Umgebung ein File-Watcher aktiv, welcher in Echtzeit geschriebenen SASS-Code kompiliert und ins CSS-Verzeichnis schreibt.Im Anschluss (nicht Teil dieses Beitrags) kann ĂŒber eine Aufgabe via Gulp der gesamte JS- und CSS-Code fĂŒr die Produktiv-Umgebung komprimiert werden. Perfekt!

Weiterlesen »