Foundation - Dự án khởi đầu

Bạn có thể bắt đầu phát triển dự án của mình với một số mẫu có sẵn có thể được cài đặt thông qua Yeti Launch hoặcFoundation CLI. Bạn có thể bắt đầu với dự án mới bằng cách sử dụng các mẫu này bằng cách sử dụng hệ thống xây dựng Gulp để xử lý Sass, JavaScript, sao chép tệp, v.v.

Mẫu cơ bản

Mẫu cơ bản giống như mẫu SASS, bao gồm cấu trúc thư mục phẳng và chỉ biên dịch các tệp SASS và thật tốt nếu có mẫu đơn giản này trong khi chỉ sử dụng SASS. Bạn có thể sử dụng mẫu cơ bản bằng cách sử dụng Yeti Launch hoặc sử dụng Foundation CLI bằng lệnh sau:

$ foundation new --framework sites --template basic

Để thiết lập điều này, trước tiên hãy chạy npm install , bower install và sử dụng lệnh npm start để chạy nó. Bạn cũng có thể tải xuống các tệp mẫu từ Github .

Mẫu ZURB

Nó là sự kết hợp của CSS / SCSS, JavaScript, mẫu Handlebars, cấu trúc đánh dấu, nén hình ảnh và sử dụng xử lý SASS. Bạn có thể sử dụng mẫu ZURB bằng cách sử dụng Yeti Launch hoặc sử dụng Foundation CLI bằng lệnh dưới đây:

$ foundation new --framework sites --template zurb

Để chạy mẫu này, hãy làm theo các bước tương tự được chỉ định trong mẫu cơ bản. Bạn cũng có thể tải xuống các tệp mẫu từ Github .

Sao chép tài sản

Bạn có thể sao chép nội dung trong src / tài sản thư mục sử dụng Gulp trong đó tài sản sẽ được thư mục dự án của bạn. Điều quan trọng ở đây là, các tệp SASS, tệp JavaScript và hình ảnh sẽ không thuộc quy trình sao chép nội dung này, vì chúng sẽ có quy trình riêng để sao chép nội dung.

Tổng hợp trang

Bạn có thể tạo các trang HTML trong ba thư mục cụ thể là trang , bố cục và phần nằm bên trong thư mục src / . Bạn có thể sử dụng trình biên dịch tệp phẳng Panini để tạo bố cục cho các trang bằng cách sử dụng các mẫu, trang, phân đoạn HTML. Quá trình này có thể được thực hiện bằng cách sử dụng ngôn ngữ tạo khuôn mẫu của Handlebars .

Biên dịch SASS

Bạn có thể biên dịch SASS thành CSS bằng Libsass và tệp SASS chính sẽ được lưu trữ trong src / asset / scss / app.scss và các phần SASS mới được tạo cũng sẽ được lưu trong chính thư mục này. Đầu ra của CSS sẽ giống như CSS bình thường, theo kiểu lồng nhau. Bạn có thể nén CSS bằng clean-css và xóa CSS không sử dụng khỏi biểu định kiểu bằng UnCSS .

Biên dịch JavaScript

Các tệp JavaScript sẽ được lưu trữ trong thư mục src / asset / js cùng với Foundation và tất cả các tệp phụ thuộc được gắn với nhau thành tệp app.js. Các tệp sẽ được gắn với nhau theo thứ tự dưới đây -

Sự phụ thuộc của Foundation.
Các tập tin sẽ được lưu trữ trong thư mục src / asset / js .
Các tập tin được đóng gói thành một tập tin gọi là app.js .

Nén hình ảnh

Theo mặc định, tất cả hình ảnh sẽ được lưu trữ trong thư mục asset / img trong thư mục dist . Bạn có thể nén hình ảnh trong khi xây dựng để sản xuất bằng cách sử dụng gulp-imagemin hỗ trợ các tệp JPEG, PNG, SVG và GIF.

BrowserSync

Bạn có thể tạo một máy chủ BrowserSync để kiểm tra trình duyệt được đồng bộ hóa có sẵn tạihttp://localhost:8000và có thể xem các mẫu đã biên dịch bằng URL này. Trong khi máy chủ của bạn đang chạy, trang sẽ tự động làm mới khi bạn lưu tệp và bạn có thể thấy các thay đổi được thực hiện đối với trang trong thời gian thực khi bạn làm việc.