Foundation mit Laravel und Elixir

Wie sollte man Foundation mit Laravel verwenden?Foundation mit Laravel und Elixir

Ich dachte, ich würde Foundation in vendor Ordner mit bower install foundation installieren. Dies führt zu einem vendor/bower_components Ordner, in dem ich Foundation und alle erforderlichen Bibliotheken wie jQuery habe.

Was muss ich in gulpfile.js für Elixir hinzufügen, um dies richtig zu interpretieren? Es sollte

installieren neue Bower Pakete

ändern Foundation Sass Variablen, ohne dass diese überschrieben werden bei der Aktualisierung

Verwendung Compass

In einem nicht-Laravel zu

Update Bower Komponenten möglich sein, Projekt Ich würde das Ruby-Juwel foundation new my_project ausführen und die kompilierten Dateien manuell einschließen. In diesem Fall erstellt der Befehl jedoch viele Dateien, die nicht benötigt werden.

Quelle

2015-06-21 MikkoP

Nizza Frage aber id es reframe mag: // Stackoverflow: Wie würden Sie Fundament-apps mit Laravel wie in dieser Frage http intergrate. com/questions/33965713/laravel-5-1-mit-foundation-apps-intergration /. BITTE BEACHTEN SIE: FOUNDATION-APPS UND KEINE STIFTUNG-SITES –

Laravel Elixir Libsass enthält, damit Sie nicht Rubin benötigen Foundation Sass Dateien von Laravel zu kompilieren. Alles, was du brauchst, ist Laube und Laravel Elixier. Außerdem müssen Sie keine Dateien aus dem Ordner bower_components in den Ordner resources/assets kopieren.

Zuerst folgen Sie official instrucctions für die Installation von Elixir.

Erstellen Sie dann die Datei .bowerrc in der Wurzel Ihrer Laravel Projekt mit diesem Inhalt:

{ 
    "directory": "vendor/bower_components" 
}

Erstellen Sie dann die Datei bower.json in der Wurzel Ihrer Laravel Projekt mit diesem Inhalt:

{ 
    "name": "laravel-and-foundation", 
    "private": "true", 
    "dependencies": { 
     "foundation": "latest" 
    } 
}

Dann installieren Sie sowohl die Laube als auch das Fundament:

npm install --global bower 
bower install # This will install Foundation into vendor/bower_components

dann die mit dieser Inhaltsdatei resources/assets/sass/_settings.scss-Datei erstellen:

// Custom settings for Zurb Foundation. Default settings can be found at 
// vendor/bower_components/foundation/scss/foundation/_settings.scss

dann die Datei resources/assets/sass/app.scss Datei mit diesem Inhalt bearbeiten:

@import "normalize"; 

@import "settings"; 

// Include all foundation 
@import "foundation"; 

// Or selectively include components 
// @import 
// "foundation/components/accordion", 
// "foundation/components/alert-boxes", 
// "foundation/components/block-grid", 
// "foundation/components/breadcrumbs", 
// "foundation/components/button-groups", 
// "foundation/components/buttons", 
// "foundation/components/clearing", 
// "foundation/components/dropdown", 
// "foundation/components/dropdown-buttons", 
// "foundation/components/flex-video", 
// "foundation/components/forms", 
// "foundation/components/grid", 
// "foundation/components/inline-lists", 
// "foundation/components/joyride", 
// "foundation/components/keystrokes", 
// "foundation/components/labels", 
// "foundation/components/magellan", 
// "foundation/components/orbit", 
// "foundation/components/pagination", 
// "foundation/components/panels", 
// "foundation/components/pricing-tables", 
// "foundation/components/progress-bars", 
// "foundation/components/reveal", 
// "foundation/components/side-nav", 
// "foundation/components/split-buttons", 
// "foundation/components/sub-nav", 
// "foundation/components/switches", 
// "foundation/components/tables", 
// "foundation/components/tabs", 
// "foundation/components/thumbs", 
// "foundation/components/tooltips", 
// "foundation/components/top-bar", 
// "foundation/components/type", 
// "foundation/components/offcanvas", 
// "foundation/components/visibility";

Konfigurieren Sie die Datei gulpfile.js mit diesem Inhalt:

elixir(function(mix) { 

    // Compile CSS 
    mix.sass(
     'app.scss', // Source files 
     'public/css', // Destination folder 
     {includePaths: ['vendor/bower_components/foundation/scss']} 
    ); 

    // Compile JavaScript 
    mix.scripts(
     ['vendor/modernizr.js', 'vendor/jquery.js', 'foundation.min.js'], // Source files. You can also selective choose only some components 
     'public/js/app.js', // Destination file 
     'vendor/bower_components/foundation/js/' // Source files base directory 
    ); 


});

Um zu bauen, folgen Sie einfach der offiziellen Dokumentation:

gulp # Run all tasks... 
gulp --production # Run all tasks and minify files 
gulp watch # Watch for changes and run all tasks on the fly

Ihre kompilierten Dateien werden unter public/css/app.css und public/js/app.js sein.

auf die neueste ZURB Foundation Version aktualisieren gerade laufen:

bower update

Quelle

2015-06-27 09:28:31

Super! Nicht nur das hilft, die Ressourcen nicht zu duplizieren, sondern es hält sie auch an dem Ort, an dem ich sie vermuten würde. Wo finde ich übrigens eine gute Dokumentation für diese Befehle? Laravel Elixir Seite hat nicht viel. Zum Beispiel war dies includesPaths eine neue für mich. – MikkoP

Im Moment ist Dokumentation über Elixir in der 5.1-Zweig zu kurz. Wenn Sie sich die 5.0-Filiale ansehen, enthält sie weitere Informationen. Normalerweise lese ich den Quellcode. Alle Laravel-Funktionen und -Klassen sind im Quellcode sehr gut dokumentiert. –

Kopieren Fundation> SCSS Ordner Ressourcen> assets Ordner, benennen Sie SCSS in Ihrem gulpfile.js Sass, fügen Sie folgende

elixir(function(mix) { 
    mix.sass('foundation.scss'); 
});

Run schluck die foundation.css Datei in der Öffentlichkeit> css-Ordner generieren, umfassen diese Datei in Ihrem Projekt.

Für js Dateien können Sie einfache Verwendung so etwas wie dies die Datei kopieren

mix.copy('resources/assets/foundation/js/app.js', 'public/js/app.js');

Quelle

2015-06-26 02:57:26 rishal

Antwort

Verwandte Themen