() translation by (you can also view the original English article)
Trong video hướng dẫn này, bạn sẽ được học về cách tải lại trình duyệt—đặc biệt là tự động hoá việc tải lại—và chúng ta sẽ xem xét ba phương pháp khác nhau để làm điều đó. Hãy bắt đầu nào!
Xem video hướng dẫn
Hãy xem xét một tiến trình front-end thông thường: bạn có trình soạn thảo code, có thể bạn đang viết một số mã HTML, sau đó bạn có CSS có thể là Sass, và bạn có trình duyệt để kiểm thử. Mỗi lần bạn tạo ra một sự thay đổi đối với code, bạn quay trở lại trình duyệt của bạn, nhấn vào nút refresh (làm mới), và xem các thay đổi mà bạn tạo ra.
Nó có vẻ giống như là một trình tự nhanh chóng, nhưng thực hiện hành động làm mới lại trang liên tục như vậy thì bạn sẽ thấy nó hơi lãng phí thời gian. Tất nhiên chúng ta có thể cải thiện điều này. Hãy xem xét ba công cụ mà có thể xử lý quá trình làm mới cho bạn, một cách tự động.
LiveReload
LiveReload đã xuất hiện khá lâu, và nó là một công cụ tuyệt vời. Nó có ứng dụng dành cho Mac OS và Windows, và giá là (tại thời điểm viết) $9,99.
Thực hiện bằng cách chèn một đoạn mã JavaScript vào trong các tập tin mà bạn đang làm việc, hoặc sử dụng nó kết hợp với extension (phần mở rộng) của trình duyệt. Nếu bạn đang sử dụng một extension của trình duyệt, bạn có thể cần phải nhập các cài đặt extension để bảo đảm bật allow access to files (cho phép truy cập tới các tập tin).
Những liên kết hữu ích
- Extension LiveReload cho Chrome
- Extension LiveReload cho Firefox
- Extension LiveReload cho Internet Explorer
- Dòng lệnh cho Thiết kế Web: LiveReload & BrowserSync
Grunt Watch
Nếu bạn quen với việc sử dụng dòng lệnh thì tôi khuyên bạn nên xem xét tùy chọn này. Grunt là một trình chạy tác vụ dựa trên JavaScript, và bạn có thể sử dụng nó để tự động bất kỳ tác vụ nào mà bạn thường xử lý bằng tay—bao gồm làm mới lại trình duyệt.
Chúng ta sẽ sử dụng plugin Grunt Watch (tên thật sự là "grunt-contrib-watch"), bạn sẽ cần nạp nó thông qua NPM.
Tác vụ watch bên trong gruntfile.js bao gồm tuỳ chọn livereload: true, và giám sát tất cả các tập tin trong dự án của tôi.
1 |
watch: { |
2 |
|
3 |
files: ['*.*'], |
4 |
options: { |
5 |
livereload: true |
6 |
}
|
7 |
|
8 |
}
|
Một lần nữa, tôi cần extension của LiveReload trong trình duyệt của tôi phải được bật, và tất cả mọi thứ hoạt động giống như trước đây, với những gì được bổ sung bạn có thể chạy thêm các tác vụ khác.
Tài nguyên cho Grunt
Browsersync
Phương pháp thứ ba, nó nhanh chóng trở thành phương pháp yêu thích của tôi, đó là Browsersync. Browsersync không chỉ là một tiện ích cho việc tải lại trang web; nó còn cho phép bạn đồng bộ hoá việc thử nghiệm trên trình duyệt.
Để sử dụng Browsersync, bạn sẽ cần Node.js, vì vậy hãy bắt đầu bằng cách cài đặt nó. Để biết rõ cách cài đặt nó, hãy xem bài Dòng lệnh cho Thiết kế Web: Cài đặt các gói bên thứ ba. Với Node đã được cài đặt, cài đặt Browsersync với lệnh npm (Node Package Manager) sau đây:
1 |
npm install g- browser-sync
|
Để sử dụng BrowserSync chúng ta cần phải sử dụng một lệnh, và điều này sẽ thay đổi tùy thuộc vào chính xác những gì mà chúng ta muốn làm. Ví dụ, lệnh này sẽ cài đặt môi trường máy chủ tĩnh, và cho Browsersync giám sát tất cả các tập tin để làm mới:
1 |
browser-sync start --server --files "*.*" |
Để biết thêm chi tiết về các lệnh khác nhau mà bạn có thể sử dụng, hãy kiểm tra tài liệu hướng dẫn.
Các liên kết hữu ích
Kết luận
Như vậy là xong! Tôi hy vọng bài hướng dẫn này đã đảm bảo cho bạn khỏi phải mất thời gian và thử một trong ba phương pháp này cho việc làm mới lại trình duyệt. Nếu bạn có bất kỳ phương pháp nào khác mà bạn thích, hãy cho chúng tôi biết trong phần bình luận ở dưới!
