Laravel Elixir mit Bower, Bootstrap, SASS und Gulp

Was Composer für das Backend – ist Bower für das Frontend. Von Haus aus wird Laravel mit der LESS-Variante von Bootstrap ausgeliefert und funktioniert – da vorkompiliert – out of the box. Wer nun aber lieber SASS verwendet und obendrein die Komponenten noch über das Package-Management von Bower einbeziehen möchte, der muss die richtigen Knöpfe kennen.

Die Basis

Benötigt werden NodeJS, npm und Gulp sowie eine frische Installation von Laravel 5.0. Die Installation von Elixir mit NodeJS, npm und Gulp habe ich bereits hier beschrieben. Abschließend für das Elixir Setup werden die in der packages.json definierten devDependencies im Verzeichnis node_modules installiert.

C:\www\Laravel5> npm install

Bower und Bootstrap

Zunächst sollte der Komandozeile der Befehl: bower bekannt gemacht werden. Hierfür wird mittels

C:\www\Laravel5> npm install -g bower

der Frontend-Packagemanager global verfügbar gemacht. Nun werden zwei Dateien – .bowerrc und bower.json – im Projektroot angelegt.

Die .bowerrc enthält Konfigurationseinstellungen für Bower und bekommt an dieser Stelle nur den Speicherort für die Repositorys genannt. Da der vendor-Ordner ohnehin schon von Git irgoriert wird, ist dieser das Ziel der Wahl.

{
  "directory": "vendor/bower_components"
}

Mit der bower.json wird analog zur composer.json das Paketsetup beschrieben. Dieses erhält zunächst nur einen Namen und die Abhängigkeiten werden durch die Installation der Pakete automatisch hinzugefügt. Die minimale Version muss lediglich das name-Attribut enthalten.

{
  "name": "My App"
}

Soweit zur Vorbereitung, nun wird endlich die Sass Variante von Bootstrap mittels Bower installiert. Der save-Parameter bewirkt den Eintrag des Paketes in die bower.json

  C:\www\Laravel5> bower install bootstrap-sass-official --save

Da Bootstrap jQuery benötigt wird diese Abhängigkeit automatisch mitinstalliert. Und beides landet im Verzeichnis vendor/bower_components.

Fertigstellung

Zunächst wird eine app.scss unter ./resources/assets/sass mit dem Inhalt: @import „bootstrap“; angelegt und wir teilen Elixir mit, wo denn der Pfad für diesen Import zu finden ist und verbinden dieses gleich mit dem Ausgabeverzeichnis im public-Ordner.
Da die Elixir-Methoden chainable sind, hängen wir ein simples copy dran, welches uns die Bootstrap-Fonts aus den bower_components ebenfalls unter public verfügbar macht. Selbes gilt für die JavaScripts von jQuery und Bootstrap, welche gleich mit Hilfe der scripts-Methode kombiniert werden können. Zusammen ergibt sich folgendes kleines Skript für die gulpfile.js:

var elixir = require('laravel-elixir');
elixir.config.sourcemaps = false;

var paths = {
    'jquery': './vendor/bower_components/jquery/',
    'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/'
}

elixir(function(mix) {
    mix.sass('app.scss', 'public/css/', {includePaths: [paths.bootstrap + 'stylesheets/']})
       .copy(paths.bootstrap + 'fonts/bootstrap/**', 'public/fonts')
       .scripts([
            paths.jquery + 'dist/jquery.min.js',
            paths.bootstrap + 'javascripts/bootstrap.min.js'
        ], 'public/js/app.js', './');
});

Im Blade-Template wird nun noch der Verweis auf die public/css/app.css und public/js/app.js eingefügt.

<link rel="stylesheet" href="{{ asset('/css/app.css') }}"/>

Abschließend mit dem simplen Befehl über die Komandozeile kompiliert.

C:\www\Laravel5> gulp

Gefunden habe ich diese Anleitung in englischer Sprache unter anderem auf Laravel-News, welche allerdings einige Fehler hatte und nicht auf Anhieb funktionieren wollte. Die Dateien gibt es zusätzlich nochmal als GitHub Gist.

Ein Gedanke zu „Laravel Elixir mit Bower, Bootstrap, SASS und Gulp“

Schreibe einen Kommentar

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