应该如何将 Foundation 与 Laravel 一起使用?
我以为我会在 vendor
中安装 Foundation文件夹 bower install foundation
.这导致了 vendor/bower_components
我拥有 Foundation 和所有必需的库(例如 jQuery)的文件夹。
我应该添加什么gulpfile.js
为了 Elixir 正确解释这一点?应该可以
在非 Laravel 项目中,我将运行 Ruby gem
foundation new my_project
并手动包含编译的文件。但是,在这种情况下,该命令会创建许多不需要工作的文件。
最佳答案
Laravel Elixir 包含 Libsass,因此您不需要 Ruby 即可从 Laravel 编译您的 Foundation Sass 文件。您只需要 bower 和 Laravel Elixir。您也不需要从 bower_components
复制文件文件夹到 resources/assets
文件夹。
先关注 official instrucctions用于安装 Elixir。
然后创建文件 .bowerrc
在 Laravel 项目的根目录中包含以下内容:
{
"directory": "vendor/bower_components"
}
然后创建文件
bower.json
在 Laravel 项目的根目录中包含以下内容:{
"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.css
和 public/js/app.js
.要更新到最新的 Zurb Foundation 版本,只需运行:
bower update
关于laravel - 使用 Laravel 和 Elixir 打基础,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30964780/