Cảnh báo: đây là một đoạn màn hình ở cấp độ trung gian, quanh co, trong đó chúng tôi xem xét mã hỗ trợ quá trình xây dựng cho một trang web. Chúng tôi không viết bất kỳ mã nào.
“Quy trình xây dựng” là tất cả những thứ xảy ra giữa mã bạn viết và mã xuất hiện trên một trang web trực tiếp. Chúng ta đã từng nói về việc sử dụng Grunt cho việc này. Sass được xử lý, nội dung được kết hợp, quá trình thu nhỏ và tối ưu hóa xảy ra, v.v. Có vô số điều mà một quy trình xây dựng có thể làm cho bạn.
Tôi đã làm việc với Katie Kovalcin để xây dựng một trang cá nhân mới cho cô ấy. Đó là một thử nghiệm cho cả hai chúng tôi trong việc học các quy trình mới và thử những thứ mới. Trong trường hợp này, tôi đang sử dụng Jekyll lần đầu tiên và tôi đang tự động hóa hệ thống SVG lần đầu tiên.
Vào thời điểm phát sóng màn hình, tôi đang ở giữa tất cả, nhưng tôi thấy hệ thống xây dựng hoạt động trơn tru nên tôi nghĩ đây là thời điểm thích hợp để chia sẻ điều đó. Tôi luôn nghĩ rằng đó là thời điểm tốt để chia sẻ - ngay tại thời điểm có điều gì đó kích thích đối với bạn.
Mọi thứ đang diễn ra:
- Grunt chạy tất cả các nhiệm vụ.
- Trang web đang được xây dựng với Jekyll. Có nghĩa là nó xử lý các bố cục và nội dung thành các trang web đầy đủ. Khi nội dung hoặc bố cục thay đổi, Grunt sẽ chạy bản dựng Jekyll.
- Jekyll cũng chạy máy chủ cục bộ.
- Sass là bộ tiền xử lý CSS. Khi tệp Sass thay đổi, Grunt sẽ chạy biến chứng Sass. Sau đó, Grunt chạy Autoprefixer trên kết quả. Sau đó, Grunt chạy lại bản dựng Jekyll để đảm bảo rằng trang web đã xử lý có thể sử dụng tất cả nội dung mới.
- Trang web sử dụng hệ thống SVG. Đối với các biểu tượng, mà còn là biểu trưng, và ai-cũng-biết-là-gì-ở cuối nó. Các tệp SVG được giữ riêng biệt trong một thư mục “svg”. Khi bất kỳ thay đổi nào trong số chúng thay đổi, Grunt chạy tác vụ svgstore để xử lý tất cả chúng cùng nhau. Sau đó, Grunt chạy bản dựng Jekyll để tất cả SVG hiện tại có sẵn cho trang web.
- Vì đây là kho lưu trữ trên GitHub và Trang GitHub hỗ trợ Jekyll, chúng tôi có thể tự động tải phiên bản trực tiếp, được lưu trữ trên trang web này. Chúng tôi cũng có thể trỏ miền khác tại trang web này.