อึก - โหลดสด

Live Reload ระบุการเปลี่ยนแปลงในระบบไฟล์ BrowserSyncใช้เพื่อดูไฟล์ HTML และ CSS ทั้งหมดในไดเร็กทอรี CSS และทำการรีโหลดหน้าเว็บในทุกเบราว์เซอร์ทุกครั้งที่มีการเปลี่ยนแปลง BrowserSync ทำให้เวิร์กโฟลว์เร็วขึ้นโดยการซิงโครไนซ์ URL การโต้ตอบและการเปลี่ยนแปลงโค้ดในอุปกรณ์ต่างๆ

การติดตั้งปลั๊กอิน BrowserSync

ปลั๊กอิน BrowserSync ให้การแทรก CSS ข้ามเบราว์เซอร์และสามารถติดตั้งได้โดยใช้คำสั่งต่อไปนี้

npm install browser-sync --save-dev

การกำหนดค่าปลั๊กอิน BrowserSync

ในการใช้ปลั๊กอิน BrowserSync คุณต้องเขียนการอ้างอิงในไฟล์คอนฟิกูเรชันของคุณดังที่แสดงในคำสั่งต่อไปนี้

var browserSync = require('browser-sync').create();

คุณต้องสร้างงานเพื่อให้BrowserSyncทำงานกับเซิร์ฟเวอร์โดยใช้ Gulp เนื่องจากคุณใช้งานเซิร์ฟเวอร์ดังนั้นคุณต้องโทร BrowserSync เกี่ยวกับรากของเซิร์ฟเวอร์ของคุณ ที่นี่เรากำลังใช้ไดเร็กทอรีฐานเป็น 'build'

gulp.task('browserSync', function() {
   browserSync.init({
      server: {
         baseDir: 'build'
      },
   })
})

คุณยังสามารถฉีดสไตล์ใหม่ลงในเบราว์เซอร์โดยใช้งานต่อไปนี้สำหรับไฟล์ CSS

gulp.task('styles', function() {
   
   gulp.src(['src/styles/*.css'])
   .pipe(concat('style.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'))
   .pipe(browserSync.reload({
      stream: true
   }))
});

ก่อนสร้างงานสำหรับ BrowserSync คุณต้องติดตั้งปลั๊กอินโดยใช้ตัวจัดการแพ็คเกจและเขียนการอ้างอิงในไฟล์คอนฟิกูเรชันของคุณตามที่กำหนดไว้ในบทนี้

เมื่อคุณกำหนดค่าเสร็จแล้วให้เรียกใช้ทั้ง BrowserSync และ watchTask เพื่อให้เกิดเอฟเฟกต์การโหลดซ้ำแบบสด แทนที่จะเรียกใช้สองบรรทัดคำสั่งแยกกันเราจะเรียกใช้ร่วมกันโดยการเพิ่มbrowserSynctaskพร้อมกับ watchTask ดังที่แสดงในโค้ดต่อไปนี้

gulp.task('default', ['browserSync', 'styles'], function (){
   gulp.watch('src/styles/*.css', ['styles']);
});

รันคำสั่งต่อไปนี้ในไดเร็กทอรีโปรเจ็กต์ของคุณเพื่อรันงานรวมข้างต้น

gulp

หลังจากรันงานโดยใช้คำสั่งด้านบนคุณจะได้ผลลัพธ์ต่อไปนี้ในพรอมต์คำสั่ง

C:\project>gulp
[13:01:39] Using gulpfile C:\project\gulpfile.js
[13:01:39] Starting 'browserSync'...
[13:01:39] Finished 'browserSync' after 20 ms
[13:01:39] Starting 'styles'...
[13:01:39] Finished 'styles' after 21 ms
[13:01:39] Starting 'default'...
[13:01:39] Finished 'default' after 15 ms
[BS] 1 file changed (style.css)
[BS] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.4:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.4:3001
 ------------------------------------
[BS] Serving files from: build

มันจะเปิดหน้าต่างเบราว์เซอร์พร้อม URL http://localhost:3000/. การเปลี่ยนแปลงใด ๆ ที่เกิดขึ้นกับไฟล์ CSS จะแสดงในพรอมต์คำสั่งและเบราว์เซอร์จะโหลดซ้ำโดยอัตโนมัติด้วยสไตล์ที่เปลี่ยนไป