Fondazione con Laravel ed elisir

Question

Come si dovrebbe usare Foundation con Laravel?

Ho pensato di installare Foundation nella cartella vendor con bower install foundation. Ciò si traduce in avere una cartella vendor/bower_components in cui ho Foundation e tutte le librerie richieste come jQuery.

Cosa devo aggiungere in gulpfile.js per elisir per interpretarlo correttamente? Dovrebbe essere possibile

• aggiornamento componenti Bower
• installare nuovo Bower pacchetti
• modificare variabili Foundation Sass senza che questi siano sovrascritti durante l'aggiornamento
• uso bussola

In un non-laravel progetto vorrei eseguire la gemma Ruby foundation new my_project e includere manualmente i file compilati. Tuttavia, in questo caso il comando crea molti file non necessari per funzionare.

Answer 1

laravel Elixir include Libsass in modo che non sarà necessario Ruby per compilare i file Fondazione Sass da laravel. Tutto ciò di cui hai bisogno è pergolato e Laravel Elixir. Inoltre, non è necessario copiare i file dalla cartella bower_components alla cartella resources/assets.

Primo follow official instrucctions per l'installazione di elisir.

quindi creare il file di .bowerrc nella root del vostro progetto laravel con questo contenuto:

{ 
    "directory": "vendor/bower_components" 
} 

quindi creare il file di bower.json nella root del vostro progetto laravel con questo contenuto:

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

Quindi installare sia pergola che fondazione:

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

quindi creare il file resources/assets/sass/_settings.scss con questo contenuto:

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

quindi modificare il file resources/assets/sass/app.scss con questo contenuto:

@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"; 

Configurare il file gulpfile.js con questo contenuto:

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 
    ); 


}); 

Per costruire basta seguire i documenti ufficiali:

I file compilati saranno a public/css/app.css e public/js/app.js.

Per aggiornare alla versione più recente ZURB Fondazione basta eseguire:

bower update 

Answer 2

Copy Fundation> cartella SCSS alla cartella delle risorse> beni, rinominare SCSS Sass, nelle vostre gulpfile.js aggiunge seguente

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

Run gulp che genererà il file foundation.css nella cartella pubblica> css, includere quel file nel tuo progetto.

Per i file js è possibile semplice uso qualcosa di simile per copiare il file

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