Question

我根据this stackoverflow post为我的Laravel网站设置了基础。它工作得很好，但我似乎无法让我的javascript元素工作。（see live example）。

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

  <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
);

但是像accordeon菜单或滑块这样的简单操作无法正常工作

<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从foundation5引入了foundation.js。基础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从this post更新为基础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;

导入规范化不再是必要的。

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

1 个答案: