Laravel 和 Elixir 的基础

Question

如何将 Foundation 与 Laravel 一起使用？

我想我会在 vendor 文件夹中安装 Foundation bower install foundation。这导致有一个 vendor/bower_components 文件夹，其中我有 Foundation 和所有必需的库，例如 jQuery。

我应该在 gulpfile.js 中添加什么才能让 Elixir 正确解释它？应该可以

更新 Bower 组件
安装新的 Bower 包
修改 Foundation Sass 变量而不在更新时覆盖这些变量
使用指南针

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

Answer 1

复制 Fundation > scss 文件夹到 resources > assets 文件夹，将 scss 重命名为 sass，在你的 gulpfile.js 添加以下内容

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

运行 gulp 将在 public > css 文件夹中生成 foundation.css 文件，将该文件包含在您的项目中。

对于 js 文件，您可以简单地使用类似这样的方法来复制文件

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

Answer 2

Laravel Elixir 包含 Libsass，因此您不需要 Ruby 从 Laravel 编译您的 Foundation Sass 文件。您只需要 bower 和 Laravel Elixir。此外，您不需要将文件从 bower_components 文件夹复制到 resources/assets 文件夹。

首先按照 official instrucctions 安装 Elixir。

然后在 Laravel 项目的根目录中创建文件 .bowerrc，内容如下：

{
    "directory": "vendor/bower_components"
}

然后在 Laravel 项目的根目录中创建文件 bower.json，内容如下：

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

然后安装 bower 和 foundation：

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

Laravel 和 Elixir 的基础

Foundation with Laravel and Elixir

laravel

sass

zurb-foundation

laravel-elixir