Mẹo nhỏ: Chọn và Kết hợp các Thành phần MDL với Gulp
Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)
Material Design Lite (MDL), như chúng ta đã học từ các hướng dẫn trước, nó đi kèm với rất nhiều thành phần UI bao gồm Điều hướng, Thẻ và Button, cho phép chúng ta nhanh chóng xây dựng các trang web. Nhưng nếu bạn chỉ muốn một hoặc một vài tính năng trong số đó? Thì tốt nhất là loại bỏ những thành phần không cần thiết, giảm nhẹ stylesheet và các tập tin JavaScript.
Trước khi chúng ta bắt đầu tìm hiểu cách thực hiện điều này, bạn sẽ cần phải cài đặt các công cụ sau trong hệ thống của mình:
Các hướng dẫn trên Tuts+ Quản lý các Build Task Với Gulp.js, và Dòng lệnh cho Thiết kế Web: Tự động hóa với Gulp sẽ giúp bạn làm quen với Gulp nếu cần.
Lấy Mã nguồn MDL
Để bắt đầu, chúng ta phải lấy về các tập tin mã nguồn gốc của MDL bằng cách sao chép chúng từ kho lưu trữ. Chạy lệnh sau trong Terminal hoặc Command Prompt:
1 |
git clone https://github.com/google/material-design-lite.git mdl |
Lệnh này sẽ tải tất cả các tập tin và lưu chúng vào một thư mục mới có tên là "mdl". Điều hướng đến thư mục đó, chạy lệnh cd mdl
, và bạn sẽ tìm thấy stylesheet chưa được biên dịch và JavaScript được tách ra thành từng phần cho mỗi thành phần, cũng như các mixin và các biến trong MDL.



Các Phụ thuộc của MDL
Bây giờ, hãy chạy lệnh sau bên trong thư mục để kéo về các phụ thuộc của MDL:
1 |
npm install
|
Các phụ thuộc bao gồm Mocha, PhantomJS, cùng với một số plugin Gulp, chẳng hạn như gulp-sass và gulp-autoprefixer. Đây là những công cụ và thư viện cần thiết để biên dịch tất cả các phần riêng lẻ thành một stylesheet và tập tin JavaScript duy nhất có thể sử dụng lại. Sau khi hoàn thành, bạn sẽ thấy các phụ thuộc được lưu trữ trong một thư mục có tên là "node_modules".
Tùy biến
Trong ví dụ này, chúng ta sẽ sử dụng thành phần điều hướng, nhưng chúng ta cũng sẽ bao gồm button và input để chúng ta có thể thêm một trường tìm kiếm có thể mở rộng trong thanh điều hướng. Ngoài ra, chúng ta sẽ bao gồm thành phần tab, đơn giản vì chúng ta có thể áp dụng các tab trong thanh điều hướng.
Bây giờ hãy mở tập tin "material-design-lite.scss" và chú thích các thành phần có liên quan ra khỏi danh sách.
1 |
// Variables and mixins |
2 |
@import "variables"; |
3 |
@import "mixins"; |
4 |
|
5 |
// Resets and dependencies |
6 |
@import "resets/resets"; |
7 |
@import "typography/typography"; |
8 |
|
9 |
// Components |
10 |
@import "palette/palette"; |
11 |
// @import "ripple/ripple"; |
12 |
// @import "animation/animation"; |
13 |
// @import "badge/badge"; |
14 |
@import "button/button"; |
15 |
// @import "card/card"; |
16 |
// @import "checkbox/checkbox"; |
17 |
// @import "data-table/data-table"; |
18 |
// @import "footer/mega_footer"; |
19 |
// @import "footer/mini_footer"; |
20 |
// @import "icon-toggle/icon-toggle"; |
21 |
// @import "menu/menu"; |
22 |
// @import "progress/progress"; |
23 |
@import "layout/layout"; |
24 |
// @import "radio/radio"; |
25 |
// @import "slider/slider"; |
26 |
// @import "spinner/spinner"; |
27 |
// @import "switch/switch"; |
28 |
@import "tabs/tabs"; |
29 |
@import "textfield/textfield"; |
30 |
// @import "tooltip/tooltip"; |
31 |
// @import "shadow/shadow"; |
32 |
// @import "grid/grid"; |
Tương tự, hãy mở "gulpfile.js" và chú thích những JS không cần thiết ở trong tham chiếu SOURCES
.
1 |
var SOURCES = [ |
2 |
// Component handler |
3 |
'src/mdlComponentHandler.js',
|
4 |
// Polyfills/dependencies |
5 |
'src/third_party/**/*.js',
|
6 |
// Base components |
7 |
'src/button/button.js',
|
8 |
// 'src/checkbox/checkbox.js',
|
9 |
// 'src/icon-toggle/icon-toggle.js',
|
10 |
// 'src/menu/menu.js',
|
11 |
// 'src/progress/progress.js',
|
12 |
// 'src/radio/radio.js',
|
13 |
// 'src/slider/slider.js',
|
14 |
// 'src/spinner/spinner.js',
|
15 |
// 'src/switch/switch.js',
|
16 |
'src/tabs/tabs.js',
|
17 |
'src/textfield/textfield.js',
|
18 |
// 'src/tooltip/tooltip.js',
|
19 |
// Complex components (which reuse base components) |
20 |
'src/layout/layout.js',
|
21 |
// 'src/data-table/data-table.js',
|
22 |
// And finally, the ripples |
23 |
// 'src/ripple/ripple.js'
|
24 |
]; |
Build
Cuối cùng, chạy lệnh gulp
trong Terminal.



Lệnh này biên dịch tập tin stylesheet và JavaScript, sau đó xuất ra phiên bản minified vào thư mục "dist". Vì chúng ta đã xóa rất nhiều phần không cần thiết, nên tập tin stylesheet và JS nhẹ hơn khoảng 40%.



Hãy xem demo; thành phần điều hướng và một số ít thành phần khác của chúng ta!
Tóm tắt
Hoàn toàn tùy thuộc vào những gì bạn đưa vào và loại bỏ khỏi Material Design Lite của bạn. Hãy cho chúng tôi biết các thành phần MDL nào bạn muốn sử dụng trong phần bình luận dưới đây nhé.
Đây là phần cuối cùng của loạt bài Tìm hiểu về Material Design Lite của chúng tôi. Tôi hy vọng bạn cảm thấy hứng thú và nó đã giúp bạn làm quen với MDL!