Foundation với Laravel và Elixir

Question

Làm thế nào để sử dụng Foundation với Laravel?

Tôi nghĩ mình muốn cài đặt Foundation trong thư mục vendor với bower install foundation. Điều này dẫn đến việc có một thư mục vendor/bower_components nơi tôi có Foundation và tất cả các thư viện cần thiết như jQuery.

Tôi nên thêm gì vào số gulpfile.js để Elixir diễn giải chính xác điều này? Nó phải được thể

• cập nhật các thành phần Bower
• cài đặt mới Bower gói
• sửa đổi biến Foundation Sass không những được ghi đè khi cập nhật
• sử dụng Compass

Trong một tổ chức phi Laravel dự án tôi sẽ chạy đá quý Ruby foundation new my_project và bao gồm các tệp đã biên dịch theo cách thủ công. Tuy nhiên, trong trường hợp này lệnh tạo ra rất nhiều tệp không cần thiết để hoạt động.

Answer 1

Laravel Elixir bao gồm Libsass vì vậy bạn sẽ không cần Ruby để biên dịch file Foundation Sass của bạn từ Laravel. Tất cả những gì bạn cần là bower và Laravel Elixir. Ngoài ra, bạn không cần sao chép các tệp từ thư mục bower_components tới thư mục resources/assets.

Đầu tiên theo dõi official instrucctions để cài đặt Elixir.

Sau đó tạo file .bowerrc trong thư mục gốc của dự án Laravel của bạn với nội dung này:

{ 
    "directory": "vendor/bower_components" 
} 

Sau đó tạo file bower.json trong thư mục gốc của dự án Laravel của bạn với nội dung này:

{ 
    "name": "laravel-and-foundation", 
    "private": "true", 
    "dependencies": { 
     "foundation": "latest" 
    } 
} 

sau đó cài đặt cả hai Chòi chơi và nền tảng:

npm install --global bower 
bower install # This will install Foundation into vendor/bower_components 

Sau đó, tạo ra các tập tin tập tin resources/assets/sass/_settings.scss với nội dung này:

// Custom settings for Zurb Foundation. Default settings can be found at 
// vendor/bower_components/foundation/scss/foundation/_settings.scss 

Sau đó chỉnh sửa các tập tin tập tin resources/assets/sass/app.scss với nội dung này:

@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"; 

Cấu hình file gulpfile.js với nội dung này:

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


}); 

Để xây dựng, chỉ cần tuân theo tài liệu chính thức:

gulp # Run all tasks... 
gulp --production # Run all tasks and minify files 
gulp watch # Watch for changes and run all tasks on the fly 

Tệp được biên soạn của bạn sẽ ở số public/css/app.css và public/js/app.js.

Để cập nhật lên phiên bản mới nhất Zurb Foundation chỉ cần chạy:

bower update 

Answer 2

Sao chép fundation> SCSS thư mục vào thư mục nguồn> tài sản, đổi tên SCSS để Sass, trong gulpfile.js của bạn thêm sau

elixir(function(mix) { 
    mix.sass('foundation.scss'); 
}); 

Run ngụm mà sẽ tạo ra tập tin foundation.css ở nơi công cộng> Thư mục css, bao gồm tệp đó trong dự án của bạn.

Đối với các file js bạn có thể một cái gì đó sử dụng đơn giản như thế này để sao chép các tập tin

mix.copy('resources/assets/foundation/js/app.js', 'public/js/app.js');