Foundation with Laravel and Elixir

江枫思渺然 提交于 2019-12-31 22:39:35

问题


How should one use Foundation with Laravel?

I thought I'd install Foundation in vendor folder with bower install foundation. This results into having a vendor/bower_components folder where I have Foundation and all required libraries such as jQuery.

What should I add in gulpfile.js for Elixir to interpret this correctly? It should be possible to

  • update Bower components
  • install new Bower packages
  • modify Foundation Sass variables without these being overwritten when updating
  • use Compass

In a non-Laravel project I would run the Ruby gem foundation new my_project and include the compiled files manually. However, in this case the command creates a lot of files not required to work.


回答1:


Laravel Elixir includes Libsass so you won't need Ruby to compile your Foundation Sass files from Laravel. All you'll need is bower and Laravel Elixir. Also you don't need to copy files from bower_components folder to resources/assets folder.

First follow official instrucctions for installing Elixir.

Then create the file .bowerrc in the root of your Laravel project with this content:

{
    "directory": "vendor/bower_components"
}

Then create the file bower.json in the root of your Laravel project with this content:

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

Then install both bower and foundation:

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

Then create the file resources/assets/sass/_settings.scss file with this content:

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

Then edit the file resources/assets/sass/app.scss file with this content:

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

Configure the file gulpfile.js with this content:

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


});

To build just follow official docs:

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

Your compiled files will be at public/css/app.css and public/js/app.js.

To update to the latest Zurb Foundation version just run:

bower update



回答2:


Copy Fundation > scss folder to resources > assets folder, rename scss to sass, in your gulpfile.js add following

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

Run gulp which will generate foundation.css file in public > css folder, include that file in your project.

For js files you can simple use something like this to copy the file

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


来源:https://stackoverflow.com/questions/30964780/foundation-with-laravel-and-elixir

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!