与Laravel和Elixir合作

Question

如何使用Laravel基金会？

我以为我会在vendor文件夹中安装Foundation bower install foundation.这导致vendor/bower_components我有一个文件夹,我有基础和所有必需的库,如jQuery.

我应该添加什么来gulpfile.js让Elixir正确解释这一点？它应该是可能的

• 更新Bower组件
• 安装新的Bower套餐
• 修改Foundation Sass变量,不要在更新时覆盖这些变量
• 使用指南针

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

Answer 1

Laravel Elixir包含Libsass,因此您不需要Ruby从Laravel编译您的Foundation Sass文件.所有你需要的是凉亭和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