Sử dụng gulp-plumber để xác định lỗi trong pipe

Trong khi bạn làm việc với gulpfile.js, hẳn sẽ có những lúc bạn thấy các task bị dừng lại nhưng không rõ nguyên nhân. gulp-plumber là package nhỏ gọn giúp bạn tìm ra nó.

gulp-plumber là gì?

Thư viện nhỏ lẻ này được phát hành nhằm duy nhất mục đích là debug quá trình pipe của gulp và output error ra cho bạn. Lỗi này đã được thông báo tại đây.

Cài đặt và sử dụng gulp-plumber

Lệnh cài đặt trong một project đang sử dụng gulpfile.js như sau:

npm install --save-dev gulp-plumber

Sau đó, bạn có thể sửa trong file gulpfile.js như sau:

// Xác định thư viện gọi vào
var plumber = require('gulp-plumber');
gulp.task('scripts', function() {
 gulp.src('src/js/*.js')
  .pipe(browserify())
  // Gọi vào trong chuỗi pipe
  .pipe(plumber())
  .pipe(uglifiy())
  .pipe(gulp.dest(jsDest));
});

Nếu có lỗi, kết quả sẽ hiển thị như ví dụ dưới đây:

[21:46:32] Plumber found unhandled error:
GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: keyword (const)
File: /Applications/MAMP/htdocs/codetot.net/wp-content/themes/codetot/src/js/customizer.js
Line: 4
Col: 2

Như ở ví dụ trên, mình sử dụng const trong khi project chưa cài đặt babel để hỗ trợ.

Thật đơn giản, phải không? Bạn có thể tìm hiểu thêm về package này ở trong thư viện npm.

Nguyễn Minh Khôi

Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.