Laravel 和 Elixir 的基础

Posted

技术标签:

【中文标题】Laravel 和 Elixir 的基础【英文标题】:Foundation with Laravel and Elixir 【发布时间】:2015-09-07 00:13:06 【问题描述】:

应该如何将 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 并手动包含已编译的文件。但是,在这种情况下,该命令会创建许多不需要工作的文件。

【问题讨论】:

很好的问题,但是我想重新定义它:你将如何将基础应用程序与 laravel 集成在这个问题***.com/questions/33965713/… 中。请注意:基金会应用程序而不是基金会网站 【参考方案1】:

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

然后安装凉亭和地基:

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.csspublic/js/app.js

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

bower update

【讨论】:

太棒了!这不仅有助于不复制资源,而且还可以将它们保留在我认为它们所在的位置。顺便说一句,我在哪里可以找到这些命令的良好文档? Laravel Elixir 页面没有太多内容。例如,这个 includePaths 对我来说是一个新的。 现在,关于 Elixir 5.1 分支的文档太简短了。如果您查看 5.0 分支,它包含更多信息。我通常做的是阅读源代码。所有 Laravel 函数和类在源代码中都有很好的记录。【参考方案2】:

将 Fundation > scss 文件夹复制到资源 > 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');

【讨论】:

以上是关于Laravel 和 Elixir 的基础的主要内容,如果未能解决你的问题,请参考以下文章

在 laravel elixir 上使用多个 webpack 方法

Laravel之Elixir

Laravel Elixir 与 JQuery 和 JQuery UI

Laravel基础教程

Laravel_Elixir_gulp任务利器安装

Larave中CSRF攻击