Bootstrap: Biên dịch CSS và JavaScript

Bootstrap sử dụng Grunt để xây dựng hệ thống, với các phương thức thuận tiện khi làm việc với framework. Đây là cách mà chúng tôi biên dịch nên mã nguồn, chạy kiểm thử và nhiều hơn thế nữa.

Cài đặt Grunt

Để cài đặt Grunt, trước hết bạn phải tải về và cài đặt node.js (đã bao gồm npm). npm là tên viết tắt của node packaged modules và là một cách để quản lý sự phụ thuộc khi phát triển thông qua node.js.

Sau đó từ màn hình giao diện dòng lệnh (command-line):

1. Cài đặt grunt-cli một cách toàn cục bằng lệnh npm install -g grunt-cli.
2. Chuyển đến thư mục làm việc /bootstrap/, sau đó chạy lệnh npm install. npm sẽ tìm kiếm tập tin package.json và tự động cài đặt tính phụ thuộc được liệt kê trong tập tin này.

Sau khi cài đặt xong, bạn sẽ có thể chạy các lệnh Grunt từ màn hình command-line.

Các lệnh Grunt sẵn có

grunt dist (chỉ biên dịch CSS và Javascript)

Tái tạo lại thư mục /dist/ với các tập tin CSS và Javascript đã được biên dịch và nén lại. Nếu bạn là người sử dụng Bootstrap, thì thông thường đây là lệnh mà bạn sẽ sử dụng.

grunt watch (Theo dõi)

Theo dõi các tập tin mã nguồn Less và tự động biên dịch lại các tập tin CSS bất cứ khi nào có thay đổi.

grunt test (Chạy kiểm thử)

Chạy JSHint và chạy các kiểm thử QUnit trên cùng trong PhantomJS.

grunt (Tạo nên tất cả mọi thứ và chạy kiểm thử)

Biên dịch và nén CSS với Javascript, xây dựng tài liệu hướng dẫn sử dụng, chạy HTML5 validator so sánh với tài liệu, tái tạo lại các tài nguyên Customizer và nhiều hơn thế nữa. Lệnh này thường chỉ cần thiết khi bạn muốn can thiệp vào Bootstrap.

Vấn đề

Nếu bạn gặp các vấn đề khi cài đặt sự phụ thuộc hoặc chạy các lệnh Grunt thì trước hết hãy xóa bỏ thư mục /node_modules/ được tạo ra bởi npm. Sau đó, hãy chạy lại lệnh npm install.