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