[GULP] Gulp - Live Reload

https://www.tutorialspoint.com/gulp/gulp_live_reload.htm

Chú ý: Để kết hợp được các task với nhau từ phiên bản 4.x trở đi chúng ta phải

gulp.task('default', gulp.series('css','js'));

Chú ý: Nếu thì sử dụng

gulp.task('default', gulp.series('a', 'b', 'c'));

Thì sử dụng

gulp.task('default', gulp.parallel('a', 'b', 'c'));

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 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ị.

Installing BrowserSync Plugin

npm install browser-sync --save-dev

Configuring BrowserSync Plugin

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

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
   }))
});

Khi bạn hoàn tất 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 ta 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']);
});