Gulp - Xem

Phương pháp Watch được sử dụng để giám sát các tệp nguồn của bạn. Khi bất kỳ thay đổi nào đối với tệp nguồn được thực hiện, đồng hồ sẽ chạy một tác vụ thích hợp. Bạn có thể sử dụng tác vụ 'mặc định' để theo dõi các thay đổi đối với tệp HTML, CSS và JavaScript.

Cập nhật tác vụ mặc định

Trong chương trước, bạn đã học cách kết hợp các tác vụ bằng cách sử dụng tác vụ mặc định. Chúng tôi đã sử dụng gulp-minify-css, gulp-autoprefixer và gulp-concatplugins, đồng thời tạo tác vụ styles để giảm thiểu các tệp CSS.

Để xem tệp CSS, chúng tôi cần cập nhật tác vụ 'mặc định' như được hiển thị trong mã sau:

gulp.task('default', ['styles'], function() {
   // watch for CSS changes
   gulp.watch('src/styles/*.css', function() {
      // run styles upon changes
      gulp.run('styles');
   });
});

Tất cả các tệp CSS trong work/src/styles/ thư mục sẽ được theo dõi và khi các thay đổi được thực hiện đối với các tệp này, tác vụ kiểu sẽ được thực thi.

Chạy tác vụ mặc định

Chạy tác vụ 'mặc định' bằng lệnh sau.

gulp

Sau khi thực hiện lệnh trên, bạn sẽ nhận được kết quả sau.

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms

Bất cứ khi nào thực hiện bất kỳ thay đổi nào đối với tệp CSS, bạn sẽ nhận được kết quả sau.

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms
gulp.run() has been deprecated. Use task dependencies or gulp.watch task 
   triggering instead.
[17:18:46] Starting 'styles'...
[17:18:46] Finished 'styles' after 5.1 ms

Quy trình Xem sẽ vẫn hoạt động và phản hồi các thay đổi của bạn. Bạn có thể nhấnCtrl+Cđể kết thúc quá trình giám sát và quay lại dòng lệnh.