Gulp - Tải lại trực tiếp

Tải lại trực tiếp chỉ định các thay đổi trong hệ thống tệp. BrowserSyncđược sử dụng để xem tất cả các tệp HTML và CSS trong thư mục CSS và thực hiện tải lại trực tiếp đến trang trong tất cả các trình duyệt, bất cứ khi nào tệp được thay đổi. BrowserSync giúp quy trình làm việc nhanh hơn bằng cách đồng bộ hóa URL, tương tác và thay đổi mã trên nhiều thiết bị.

Cài đặt Plugin BrowserSync

Plugin BrowserSync cung cấp chèn CSS trên nhiều trình duyệt và có thể được cài đặt bằng lệnh sau.

npm install browser-sync --save-dev

Định cấu hình Plugin BrowserSync

Để sử dụng plugin BrowserSync, bạn cần viết phụ thuộc vào tệp cấu hình của mình như được hiển thị trong lệnh sau.

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

Bạn cần tạo tác vụ để BrowserSync hoạt động với máy chủ bằng Gulp. Vì bạn đang chạy máy chủ, vì vậy bạn cần thông báo cho BrowserSync về thư mục gốc của máy chủ. Ở đây, chúng tôi đang sử dụng thư mục cơ sở làm 'bản dựng'.

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

Bạn cũng có thể đưa các kiểu mới vào trình duyệt bằng tác vụ sau cho tệp 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
   }))
});

Trước khi tạo tác vụ cho BrowserSync, bạn cần cài đặt các plugin bằng trình quản lý gói và ghi các phần phụ thuộc vào tệp cấu hình của bạn như được định nghĩa trong chương này .

Khi bạn hoàn thành cấu hình, hãy chạy cả BrowserSync và watchTask để xảy ra hiệu ứng tải lại trực tiếp. Thay vì chạy hai dòng lệnh riêng biệt, chúng tôi sẽ chạy chúng cùng nhau bằng cách thêm browserSynctask cùng với watchTask như được hiển thị trong đoạn mã sau.

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

Chạy lệnh sau trong thư mục dự án của bạn để thực hiện các tác vụ kết hợp ở trên.

gulp

Sau khi chạy tác vụ bằng lệnh trên, bạn sẽ nhận được kết quả sau trong dấu nhắc lệnh.

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

Nó sẽ mở cửa sổ trình duyệt với URL http://localhost:3000/. Mọi thay đổi được thực hiện đối với tệp CSS sẽ phản ánh trong dấu nhắc lệnh và trình duyệt sẽ tự động tải lại với các kiểu đã thay đổi.