Laravel和Elixir的粉底 [英] Foundation with Laravel and Elixir

问题描述

一个人应该如何将Foundation与Laravel一起使用?

How should one use Foundation with Laravel?

我想我会将Foundation安装在bower install foundation的vendor文件夹中.这导致在我有Foundation和所有必需的库(例如jQuery)的地方有一个vendor/bower_components文件夹.

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.

我应该在gulpfile.js中添加些什么，以便Elixir正确解释?应该有可能

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

• 更新Bower组件
• 安装新的Bower软件包
• 修改Foundation Sass变量，而在更新时不会将其覆盖
• 使用指南针

在一个非Laravel项目中，我将运行Ruby gem foundation new my_project并手动包含已编译的文件.但是，在这种情况下，该命令会创建许多不需要工作的文件.

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.

推荐答案

Laravel Elixir包含Libsass，因此您不需要Ruby即可从Laravel编译Foundation Sass文件.您只需要凉亭和Laravel Elixir.同样，您也不需要将文件从bower_components文件夹复制到resources/assets文件夹.

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.

首先按照官方说明安装Elixir.

First follow official instrucctions for installing Elixir.

然后在Laravel项目的根目录中使用以下内容创建文件.bowerrc:

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

{
    "directory": "vendor/bower_components"
}

然后在Laravel项目的根目录中使用以下内容创建文件bower.json:

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"
    }
}

然后安装凉亭和粉底:

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

然后使用以下内容创建文件resources/assets/sass/_settings.scss文件:

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

然后使用以下内容编辑文件resources/assets/sass/app.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";

使用以下内容配置文件gulpfile.js:

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

您的编译文件将位于public/css/app.css和public/js/app.js.

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

要更新到最新的Zurb Foundation版本，只需运行:

To update to the latest Zurb Foundation version just run:

bower update

这篇关于Laravel和Elixir的粉底的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！