Фонд с Ларавелом и Эликсиром

Question

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

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

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

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

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

Answer 1

Laravel Elixir включает Libsass, поэтому вам не понадобится Ruby для компиляции файлов Foundation Sass из Laravel. Все, что вам нужно, это беседка и эликсир Laravel. Также вам не нужно копировать файлы из 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

Answer 2

Скопируйте Fundation > папку scss в ресурсы> папку активов, переименуйте 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');