没有让 Foundation 的 Javascript 元素起作用（使用 Laravel 和 Elixir）

Question

我已经根据 . It works great but I can't seem to get my javascript elements to work. (see live example).

为我的 Laravel 站点设置了 Foundation

我在页面底部拉入脚本（它们 link 正确并且看起来不错）：

  <script src="http://104.131.86.114/js/main.js"></script> 
  <script src="http://104.131.86.114/js/dependencies.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>

这是我编译它们的方式（我的 gulpfile）：

// Compile JavaScript
mix.browserify('main.js');

mix.scripts(
    ['vendor/modernizr.js', 'vendor/jquery.js', 'foundation.js'], // Source files. You can also selective choose only some components
    'public/js/dependencies.js', // Destination file
    'vendor/bower_components/foundation/js/' // Source files base directory
);

但是手风琴菜单或滑块等简单的东西无法正常工作

<div class="slider" data-slider data-initial-start="50" data-end="200">
  <span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>

这很可能很简单，所以非常感谢您抽出宝贵时间。

编辑： 上面的 gulpfile 从 foundation 5 中拉入 foundation.js。Foundation 6 现在驻留在 vendor/bower-components/foundation-sites/dist/foundation.js 中。我将 gulpfile 更新为：

mix.scripts(
    ['modernizr/modernizr.js', 'jquery/dist/jquery.js', 'foundation-sites/dist/foundation.js'], // Source files. You can also selective choose only some components
    'public/js/dependencies.js', // Destination file
    'vendor/bower_components/' // Source files base directory
);

这稍微改进了 JavaScript 功能，但仍然不会显示滑块。

Answer 1

vendor/bower_components/foundation 是 Foundation 5 存放所有资源的地方。 Foundation 6 使用文件夹 vendor/bower_components/foundation-sites。

正在将 gulpfile.js 从更新到基础 6：

elixir(function(mix) {

// Compile CSS
mix.sass(
    'app.scss', // Source files
    'public/css', // Destination folder
    {includePaths: ['vendor/bower_components/foundation-sites/scss']}
);

// Compile JavaScript
mix.scripts(
    ['modernizr/modernizr.js', 'jquery/dist/jquery.js', 'foundation-sites/dist/foundation.js'], // Source files. You can also selective choose only some components
    'public/js/dependencies.js', // Destination file
    'vendor/bower_components/' // Source files base directory
    );
});

此外，将您的 app.scss 更新为：

@import "settings";

// Include all foundation
@import "foundation";
@include foundation-everything;

不再需要导入 normalize。

没有让 Foundation 的 Javascript 元素起作用（使用 Laravel 和 Elixir）

Not getting Foundation's Javascript elements to work (with Laravel and Elixir)

javascript

laravel

zurb-foundation