scroll-to-target-tracking#onClick" data-label="Scroll khổng lồ top" data-target-selector="#page-body"> Scroll to top
Read Time: 4 mins url-selector#selectionChanged"> বাংলা English Español Bahasa Indonesia Polski Português Pусский tiếng Việt
Trong đoạn phim hướng dẫn này, bạn sẽ được học về phong thái tải lại trình duyệt—đặc biệt là tự động hoá bài toán tải lại—và họ sẽ chu đáo ba cách thức khác nhau để gia công điều đó. Hãy bắt đầu nào!
Xem clip hướng dẫn
Hãy xem xét một các bước front-end thông thường: các bạn có trình biên soạn thảo code, rất có thể bạn sẽ viết một trong những mã HTML, sau đó bạn có CSS có thể là Sass, và các bạn có trình phê chuẩn để kiểm thử. Mỗi lần bạn tạo thành một sự đổi khác đối cùng với code, bạn trở về trình thông qua của bạn, nhấp vào nút refresh (làm mới), với xem các biến hóa mà các bạn tạo ra.
Bạn đang xem: Form submit không cần load lại trình duyệt
Nó gồm vẻ hệt như là một trình tự cấp tốc chóng, nhưng lại thực hiện hành vi làm mới lại trang liên tiếp như vậy thì bạn sẽ thấy nó hơi lãng phí thời gian. Vớ nhiên chúng ta có thể cải thiện điều này. Hãy coi xét bố công cầm mà rất có thể xử lý quá trình làm mới cho bạn, một biện pháp tự động.
LiveReload
LiveReload đã mở ra khá lâu, với nó là 1 trong những công chũm tuyệt vời. Nó tất cả ứng dụng giành riêng cho Mac OS và Windows, với giá là (tại thời điểm viết) $9,99.
Thực hiện bằng phương pháp chèn một quãng mã JavaScript vào trong những 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 như khách hàng đang sử dụng một extension của trình duyệt, bạn có thể cần nên nhập các cài đặt extension để đảm bảo bật allow access khổng lồ files (cho phép truy vấn tới các tập tin).
Grunt Watch
Nếu chúng ta 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 lựa chọn này. Grunt là 1 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à các bạn thường xử lý bằng tay—bao có làm mới lại trình duyệt.
Xem thêm: Hoa Lá Nở Thắm Đẹp Làn Môi Hồng Karaoke, Cánh Thiệp Đầu Xuân
Chúng ta sẽ sử dụng plugin Grunt Watch (tên thiệt sự là "grunt-contrib-watch"), bạn sẽ cần hấp thụ nó thông qua NPM.
Tác vụ watch phía bên trong gruntfile.js bao gồm tuỳ chọn livereload: true, và đo lường và thống kê tất cả những tập tin trong dự án công trình của tôi.
watch: files: <"*.*">, options: livereload: true Một lần nữa, tôi nên extension của LiveReload vào trình coi sóc của tôi đề nghị được bật, và toàn bộ mọi thứ vận động giống như trước đó đây, với hầu như gì được xẻ sung chúng ta có thể chạy thêm những tác vụ khác.
Tài nguyên cho GruntBrowsersync
Phương pháp lắp thêm ba, nó mau lẹ trở thành phương thức yêu say đắm của tôi, sẽ là Browsersync. Browsersync không chỉ có là một tiện ích cho câu hỏi tải lại trang web; nó còn có thể chấp nhận được bạn đồng nhất hoá việc thử nghiệm bên trên trình duyệt.
Để thực hiện Browsersync, các bạn sẽ cần Node.js, vì chưng vậy hãy ban đầu bằng cách setup nó. Để biết rõ cách thiết lập nó, hãy xem bài Dòng lệnh cho thiết kế Web: setup các gói mặt thứ ba. Cùng với Node đang được mua đặt, cài đặt Browsersync cùng với lệnh npm (Node Package Manager) sau đây:
npm install g- browser-syncĐể sử dụng BrowserSync họ cần phải thực hiện một lệnh, và vấn đề đó sẽ thay đổi tùy trực thuộc vào đúng đắn những gì mà họ muốn làm. Ví dụ, lệnh này sẽ setup môi trường sever tĩnh, và đến Browsersync giám sát tất cả các tập tin để gia công mới:
browser-sync start --server --files "*.*"Để biết thêm chi tiết về những lệnh khác nhau mà chúng ta cũng có thể sử dụng, hãy kiểm tra tài liệu hướng dẫn.
Kết luận
Như vậy là xong! Tôi hy vọng bài gợi ý này đã đảm bảo cho bạn khỏi nên mất thời hạn và thử 1 trong những ba cách thức này cho việc làm mới lại trình duyệt. Nếu như bạn có bất kỳ phương pháp nào khác mà các bạn thích, hãy cho cửa hàng chúng tôi biết trong phần phản hồi ở dưới!
