Laravel 5 与 Foundation 5

Question

我通过 bower 在“resources/assets/bower_components”下安装了基础。

我不知道如何处理 _settings.scss 文件以及将其放在哪里。

我的 app.scss 文件只有：

@import "../bower_components/foundation/scss/foundation";
@import "../bower_components/foundation/scss/normalize";

我无法让 javascript 工作。我不知道为什么。在我的 gulpfile 中，我将所有 javascript 文件合并到一个文件 app.js 中。

这是我的 gulpfile。

elixir(function(mix) {

var bowerPath = "resources/assets/bower_components/";

mix.sass(
    [
        "app.scss"
    ],
    "public/css",
    {
        includePaths: [
            bowerPath + "foundation/scss"
        ]
    }
)
    .scripts(
    [
        "jquery/dist/jquery.js",
        "fastclick/lib/fastclick.js",
        "jquery.cookie/jquery.cookie.js",
        "jquery-placeholder/jquery.placeholder.js",
        "foundation/js/foundation.js"
    ],
    "public/js/app.js",
    bowerPath
);
});

这是我目前的项目结构：http://postimg.org/image/jhppu3lab/0789eba0/

请有人帮忙。我被卡住了，我认为我在此过程中做错了什么。如果有人能指导我从一个新的 Laravel 项目安装 Foundation 5 到 Laravel 5，那就太棒了！

Answer 1

对于 JavaScript，我们使用 mix.scripts 的第三个参数来设置应用程序根目录的基本路径，这似乎效果更好。

mix.scripts(sharedJs.concat([
  'bower_components/jquery/dist/jquery.js',
  'bower_components/fastclick/lib/fastclick.js',
  'bower_components/jquery.cookie/jquery.cookie.js',
  'bower_components/jquery-placeholder/jquery.placeholder.js',
  'bower_components/foundation/js/foundation.js'
]), 'public/js/app.js', './');

Answer 2

有时使用 bower 比简单的手动解决方案要麻烦得多。

我正在使用以下解决方案：

我将这些行添加到我的主模板中：

@if( \App::environment() == 'local')   
  @include('layouts.files_local')
@else
  @include('layouts.files_cdnjs')
@endif

在 files_local 我有

{!! HTML::script('js/jquery-2.1.4.min.js') !!}
{!! HTML::script('js/uikit.min.js') !!}
{!! HTML::style('css/uikit.almost-flat.min.css') !!}

在文件cdnjs里面我有

{!! HTML::script('//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js') !!} 
{!! HTML::style('//cdnjs.cloudflare.com/ajax/libs/uikit/2.20.2/css/uikit.almost-flat.min.css') !!}
{!! HTML::script('//cdnjs.cloudflare.com/ajax/libs/uikit/2.20.2/js/uikit.min.js') !!}

1. 这是我在本地工作时解决连接问题的解决方法。如果您在可靠的连接上在线工作，则仅使用 CDNJS 版本就足够了

2. 我在这个例子中使用了 UI-Kit，因为经过三个 CSS 框架（在 Semantic-UI 旁边）的长时间开发，我得出结论认为它是我的最佳解决方案。将我的 UI-kit 替换为 Foundation 即可完成。