Hướng dẫn Tìm hiểu Prepros để biên dịch SASS, LESS, HAML…chuyên nghiệp

[PVS]

Tìm hiểu Prepros để biên dịch SASS, LESS, HAML…chuyên nghiệp

Prepros là một ứng dụng miễn phí (cũng có bản Pro) giúp chúng ta biên dịch các ngôn ngữ hỗ trợ viết CSS, HTML (hay còn gọi là Processor) để làm việc nhanh hơn. Nếu bạn đã từng biết qua LESS, SASS hay HAML thì đó là Processor, mình nghĩ quen thuộc nhất với mọi người là LESS dùng để viết CSS.

Khi làm việc với các processor này thì hầu hết bạn phải cần một ứng dụng để biên dịch các đoạn mã của nó ra thành ngôn ngữ gốc để có thể hiển thị được. Cũng giống như SASS, khi làm việc với nó bạn phải tiến hành viết lệnh Ruby giống như mình đã hướng dẫn ở bài này.

Nhưng khi dùng Prepros, các quy trình này đều sẽ hoàn toàn tự động biên dịch ra file ngôn ngữ gốc sau khi bạn ấn save ở editor. Nhưng nếu chỉ biên dịch tự động thì cũng chẳng có gì để nói vì hiện nay có rất nhiều ứng dụng làm được việc này. Nhưng bên trong nó còn có nhiều tính năng nữa đã thôi thúc mình sử dụng bản Pro của nó với chi phí chỉ $29.

Các tính năng nổi bật của Prepros
Hỗ trợ nhiều ngôn ngữ
Không giống các ứng dụng windows khác chỉ biên dịch một hoặc cao lắm là hai ngôn ngữ processsor, Prepros có thể hỗ trợ 8 ngôn ngữ processor khác nhau. Da’ hell, 8 ngôn ngữ? Chính xác, là 8 ngôn ngữ, bao gồm:

1. LESS
2. Stylus
3. Jade
4. CoffeScript
5. Haml
6. Markdown
7. Slim
8. LiveScript

Mình đang sung sướng đây bởi vì không cần phải tạo file config.rb như lúc xài Compass hay FireApp để làm việc cùng SASS. Prepros có thể tự nhận diện và hoàn toàn tự động, chỉ cần Add New Project và trỏ tới thư mục chứa các file cần biên dịch. Dĩ nhiên, nó cũng có thể dịch nhiều ngôn ngữ cùng một lúc, miễn là có cùng folder.

Live Refresh
Khái niệm Live Refresh chắc đã không còn quá xa lạ gì với các Developer, nghĩa là chỉ cần mở trình duyệt, mỗi khi bạn sửa và lưu code thì nó sẽ tự cập nhật mà không cần phải ấn nút F5. Nhưng nếu bạn không muốn ấn nút save thì hãy cài extension Prepros dành cho Google Chrome, nó sẽ tự động hoàn toàn.

Tính năng Live Refresh vô cùng hữu ích nếu bạn lập trình giao diện Responsive bởi vì bạn có thể thu nhỏ cửa sổ trình duyệt lại và vừa code vừa xem kết quả.

Biên dịch trực tiếp trên host thông qua FTP
Nếu bạn ngại khi dùng processor sẽ khó bảo trì trực tiếp trên host thì bây giờ bạn không còn phải lo lắng nữa khi dùng Prepros vì bạn có thể trực tiếp biên dịch một file processor ngay trên host và nó cũng sẽ tự xuất file ngôn ngữ gốc ngay trên host, nếu đã có rồi thì nó sẽ up đè lên.

Multi Device Testing & Remote Inspect
Giải thích ngắn gọn này thì tính năng này sẽ tạo ra một địa chỉ riêng bằng IP và bạn có thể sử dụng các thiết bị di động như smartphone, tablet để xem giao diện mà bạn đang viết, miễn là các thiết bị dùng chung một mạng internet. Rất thích hợp khi bạn tiến hành làm giao diện Responsive.

Còn Remote Inspect nó giống như Teamviewer vậy, nó cho phép bạn sử dụng tính năng Inspect Element ngay trên cửa sổ trình duyệt của các thiết bị khác có chung một đường truyền. Xem ảnh dưới.

Image Optimize
Tối ưu này được tích hợp sẵn để bạn có thể tối ưu các hình ảnh trong dự án nhằm giảm bớt dung lượng nhưng chất lượng ảnh không hề bị thay đổi.

Tải và cài đặt
Hiện tại Prepros chia ra làm 2 bản, miễn phí và trả phí. Dĩ nhiên bản miễn phí sẽ bị giới hạn một số tính năng quan trọng nhưng nếu bạn chỉ cần biên dịch thì bản free là quá đủ.

Tải Prepros Free

Còn nếu bạn là một Developer chuyên nghiệp, làm việc theo team và cần các tính năng như Live Refresh, FTP, Multi Device Testing thì hãy sử dụng bản Pro với giá $24.

Tải Prepros Pro – $29

Hy vọng với vũ khí mới này, các developer như chúng ta sẽ tiện lợi hơn trong lúc làm việc để có thể cho ra nhiều sản phẩm tối ưu nhất.

Chúc các bạn thành công.

Nguồn: thachpham.com​