Tự động reload browser với livejs

Thứ Ba, 24 tháng 5, 2016

Khi viết javascript hay css, bạn có bao giờ cảm thấy bất tiện khi cứ phải Alt + Tab → Ctrl + R sau mỗi lần save file không? Cá nhân mình cảm thấy rất bất tiện vì mỗi lần như thế mình phải ấn 2 tổ hợp phím ở trên mới xem được kết quả. Nhiều khi thay đổi lại rất nhỏ dẫn tớ sau khi refresh browser xong thi chả nhìn ra được mình đã thay đổi chỗ nào :)). Trong những tình huống này giá mà có tool nào cho phép cập nhật browser sau khi save file luôn thi thích.

Thử google thì thấy có http://livejs.com/ là một tool giải quyết nhu cầu này! Về nguyên lý, livejs sẽ định kỳ gửi HEAD request của giao thức HTTP đến máy chủ và kiểm tra thời gian cập nhật của file. Nếu file được cập nhật, livejs sẽ tự động tải file về và tự động refresh browser để hiện kết quả mới.
Theo như tài liệu của livejs nói thì chỉ cần nhúng livejs vào html và nó sẽ làm tất cả các việc còn lại. Ngoài ra mình cũng cần máy chủ để trả về kết quả livejs. Để đơn giản, mình dùng python SimpleHTTPServer vì module này cho phép chạy một máy chủ web đơn giản (chỉ bằng một dòng lệnh) mà không cần cài đặt gì
Cụ thể, mình thực hiện các bước sử dụng livejs như sau:

Tải livejs tại đây http://livejs.com/live.js
Ném các file html, js, css và live.js ở trên vào một thư mục (ví dụ có file index.html)

Nhúng live.js vào index.html.

<html>
<head>
<link rel="stylesheet" href="reset.css"></link>    
<link rel="stylesheet" href="link.css"></link>    
<script type="text/javascript" src="live.js"></script>
</head>
<body> 
<!-- YOUR CODE HERE -->
</body>
</html>

Trong thư mục các file trên, chạy SimpleHTTPServer
```
$ python -m SimpleHTTPServer 8000
```
Mở browser và truy cập đến http://localhost:8000/index.html
Viết code :D. Mỗi lần bạn save file, browser sẽ tự động cập nhật index.html

Mình dùng thử và thấy livejs khá tiện. Mình chia màn hình thành 2 cửa sổ, một bên code, một bên browser. Save code và nhìn kết quả bên browser luôn - rất tiện !!

Tintucthuthuatpc Sưu Tầm

Tags: Thủ Thuật Web