Laravel + Foundation: Step by Step
19. Juli 2015 · Kategorien: CSS Stylesheets, PHP, Webentwicklung

In diesem Artikel möchte ich euch zeigen, wie ihr Foundation 5 auf saubere Art und Weise in Laravel 5 integriert.
Laravel ist eines der aktuell angesagtesten PHP-Frameworks. Foundation ist neben Bootstrap das populärste CSS-Framework.
Bower installieren
So wie apt-get ein Package Manager für Unix-Programme ist, ist npm ein Package Manager für JavaScript Bibliotheken, ist Bower ein Package Manager für Assets.
Um Foundation über Bower installieren zu können, musst Du zuerst Bower installieren
sudo apt-get install npm; # NodeJS Package Manager installieren sudo npm install -g bower; # Bower installieren
Das -g steht für global. Bower wird damit systemweit installiert und nicht nur in dem aktuellen Verzeichnis, in dem man sich befindet. Dadurch kann bower auch in anderen Projekten verwendet werden.
Bower konfigurieren
Als nächstes musst Du Bower für Dein Laravel-Projekt so konfigurieren, dass Packages im assets-Ordner abgelegt werden. Gehe deshalb in das Verzeichnis, in dem Dein Projekt liegt und lege eine neue Datei .bowerrc an.
Gib ihr folgenden Inhalt:
{ "directory": "resources/assets/bower_modules" }
Öffne danach ein Terminal, wechsle mit cd in Dein Projektverzeichnis und konfiguriere Dein Bower-Projekt:
bower init ? name: Name Deines Projekts ? version: 0.0.1 ? description: Beschreibung deines Projekts ? main file: ? what types of modules does this package expose? ? keywords: laravel foundation tutorial ? authors: Christian Kilb <christian.kilb@dont-spam.com> ? license: Deine Lizenz ? homepage: http://www.deine-homepage.de ? set currently installed components as dependencies? Yes ? add commonly ignored files to ignore list? Yes ? would you like to mark this package as private which prevents it from being accidentally published to the registry? No
Die meisten Werte (keywords, main file etc.) kannst Du gerne leer lassen. Da Du Dein Bower-Projekt höchstwahrscheinlich nicht publishen wirst, haben diese Angaben keine Bedeutung.
Um Foundation nun über Bower zu installieren, gib folgendes im Terminal ein:
bower install foundation --save bower install jquery --save
Das –save bedeutet, dass Foundation als Abhängigkeit in der bower.json eingetragen wird. So kannst Du in Zukunft mit bower update Foundation aktualisieren.
Git konfigurieren
Wenn Du git benutzt, empfiehlt es sich, das Verzeichnis /resources/assets/bower_modules in der .gitignore Datei einzutragen. Externe Libraries sollten nicht in eigenen Repositories vorliegen.
Gulp installieren
Damit das Foundation JS und CSS in Deinem Template eingebunden werden kann, musst Du zuerst Gulp installieren.
npm install -g gulp
In Deinem Projektverzeichnis musst Du außerdem sämtliche NodeJS-Abhängigkeiten installieren, die Laravel erfordert.
Wechsel deswegen wieder in dein Projektverzeichnis und gib ein:
npm install
JS & CSS konfigurieren
Öffne nun die Datei resources/assets/sass/app.scss und trage in ihr ganz oben folgende Zeile ein:
@import "resources/assets/bower_modules/foundation/scss/foundation";
Erstelle nun eine Datei resources/assets/js/app.js und gib ihr folgenden Inhalt:
$(document).foundation();
Öffne nun die Datei gulpfile.js in Deinem Projektverzeichnis und gib ihr folgenden Inhalt:
var elixir = require('laravel-elixir'); elixir(function(mix) { mix.sass('app.scss'); // Die app.scss inklusive den von ihr importieren Foundation-Dateien zu einer app.css kompilieren mix.scripts([ '../bower_modules/jquery/dist/jquery.min.js', // jQuery und ... '../bower_modules/foundation/js/foundation.min.js', //... Foundation und ... 'app.js' // ... die eben angelegte app.js zu einer JS-Datei "all.js" vereinigen ]); mix.version([ 'css/app.css', // Die generierte CSS- ... 'js/all.js' // ... und JS-Datei versionieren ]); });
Die Versionierung sorgt dafür, dass bei jeder Änderung der JS- oder CSS-Datei automatisch von Laravel ein neuer Datei-Hash generiert wird. So gibt es keine Probleme mit dem Browser-Cache, weil die Dateien jedes Mal einen anderen Namen haben.
Laravel + Foundation: CSS und JavaScript im Template einbinden
Der letzte Schritt ist es, die Dateien in eurem Template einzubinden. Damit die Versionierung funktioniert, kannst Du nicht einfach den Pfad auf die generierten Dateien setzen, sondern musst eine Laravel-Helper-Funktion benutzen:
CSS einbinden:
<link href="{{ elixir("css/app.css") }}" rel="stylesheet" />
JS einbinden:
<script type="text/javascript" src="{{ elixir("js/all.js") }}"></script>
Dateien kompilieren
Gib im Terminal
gulp
ein, um einmalig zu kompilieren.
Oder
gulp watch
um immer automatisch dann zu kompilieren, wenn Du eine Datei geändert und darauf gespeichert hast.
Autor: Christian Kilb | Kategorien: CSS Stylesheets, PHP, Webentwicklung
Klasse,
war mir nicht bewusst, dass npm analgo zu apt get fungiert.
Ich probier es bald mal aus. Wo bekommt man denn guten Webspace mit node?
vg
Stefan