Фонд с Laravel и Elixir

Как следует использовать Foundation с Laravel?

Я думал установить Foundation в папку vendor с bower install foundation. Это приводит к тому, что у меня есть папка vendor/bower_components, в которой у меня есть Foundation и все необходимые библиотеки, такие как jQuery.

Что я должен добавить в gulpfile.js, чтобы Эликсир правильно интерпретировал это? Должно быть возможно

  • обновить компоненты Bower
  • установить новые пакеты Bower
  • изменять переменные Foundation Sass, не перезаписывая их при обновлении
  • использовать компас

В проекте, отличном от Laravel, я бы запустил гем Ruby foundation new my_project и включил скомпилированные файлы вручную. Однако в этом случае команда создает множество ненужных для работы файлов.


laravel sass zurb-foundation laravel-elixir
person MikkoP    schedule 21.06.2015    source источник
comment
Хороший вопрос, однако я хотел бы его переформулировать: как бы вы интегрировали базовые приложения с laravel, как в этом вопросе stackoverflow.com/questions/33965713/ . ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ: ФУНДАМЕНТАЛЬНЫЕ ПРИЛОЖЕНИЯ, А НЕ ФУНДАМЕНТАЛЬНЫЕ САЙТЫ   -  person Jimmy Obonyo Abor    schedule 01.12.2015

Ответы (2)


arrow_upward
20
arrow_downward

Laravel Elixir включает Libsass, поэтому вам не понадобится Ruby для компиляции файлов Foundation Sass из Laravel. Все, что вам нужно, это Bower и Laravel Elixir. Также вам не нужно копировать файлы из папки bower_components в папку resources/assets.

Сначала следуйте официальным инструкциям по установке Elixir.

Затем создайте файл .bowerrc в корне вашего проекта Laravel со следующим содержимым:

{
    "directory": "vendor/bower_components"
}

Затем создайте файл bower.json в корне вашего проекта Laravel со следующим содержимым:

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

Затем установите беседку и фундамент:

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

Затем создайте файл resources/assets/sass/_settings.scss с таким содержимым:

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

Затем отредактируйте файл resources/assets/sass/app.scss с таким содержимым:

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

Настройте файл gulpfile.js с таким содержимым:

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


});

Для сборки просто следуйте официальной документации:

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

Ваши скомпилированные файлы будут находиться в public/css/app.css и public/js/app.js.

Чтобы обновиться до последней версии Zurb Foundation, просто запустите:

bower update
person Javi Stolz    schedule 27.06.2015
comment
Потрясающий! Это не только помогает не дублировать ресурсы, но и сохраняет их в том месте, где я полагаю, что они должны быть. Кстати, где я могу найти хорошую документацию по этим командам? На странице Laravel Elixir не так много. Например, этот includePaths был для меня новым. - person MikkoP; 30.06.2015
comment
На данный момент документации по Эликсиру в ветке 5.1 слишком мало. Если вы посмотрите на ветку 5.0, она содержит больше информации. Что я обычно делаю, так это читаю исходный код. Все функции и классы Laravel очень хорошо документированы в исходном коде. - person Javi Stolz; 30.06.2015

arrow_upward
1
arrow_downward

Скопируйте папку Fundation> scss в папку ресурсов> папку assets, переименуйте scss в sass, в gulpfile.js добавьте следующее

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

Запустите gulp, который сгенерирует файл Foundation.css в папке public > css, включите этот файл в свой проект.

Для файлов js вы можете просто использовать что-то подобное, чтобы скопировать файл

mix.copy('resources/assets/foundation/js/app.js', 'public/js/app.js');
person rishal    schedule 26.06.2015