> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/javascript/gulp-live-reload.md).

# \[GULP] Gulp - Live Reload

> 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']);
});  
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://javascriptuse.gitbook.io/javascript/gulp-live-reload.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.