没有获得基础's的Javascript元素工作(与Laravel和Elixir）

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

本文关键字：工作 元素 Javascript Laravel Elixir      更新时间：2023-09-26

我已经根据这篇stackoverflow帖子为我的Laravel网站建立了基础。它工作得很好，但我似乎无法让我的javascript元素正常工作。（参见实际示例）。

我在页面底部插入脚本（它们链接正确，看起来不错）：

  <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从foundation5中提取了foundation.js。Foundation6现在位于vendor/bower components/foundationsites/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功能，但仍然不会显示滑块。

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已不再必要。

相关文章：