Theo dõi sự thay đổi tài liệu trong Gulp

Không thuận tiện lắm khi mỗi lần cần thực hiện một biến đổi nào đó lại phải gọi lệnh trong console - bởi vì khi viết code, việc này phải làm rất thường xuyên.

Do đó, Gulp có sẵn một hàm đặc biệt watch để theo dõi sự thay đổi của tệp. Khi bất kỳ tệp nào được theo dõi thay đổi, tác vụ tương ứng sẽ được chạy tự động.

Hãy xem xét ví dụ về biến đổi LESS sang CSS. Trước tiên, hãy kết nối tất cả những gì cần thiết:

let {src, dest, watch} = require('gulp');
let less = require('gulp-less');

Bây giờ hãy tạo một tác vụ để biến đổi:

function task(cb) {
	return src('src/*.less')
		.pipe(less())
		.pipe(dest('dist'));
}

Bây giờ hãy thực hiện xuất một hàm ẩn danh, bên trong đó chúng ta sẽ theo dõi các thay đổi của tệp của mình, gọi tác vụ của chúng ta trong trường hợp này:

exports.default = function() {
	watch('src/*.less', task);
};

Sau khi khởi chạy, một tác vụ "vĩnh cửu" sẽ chạy trong dòng lệnh. Điều này có nghĩa là không thể nhập các lệnh khác vào terminal này. Có thể ngắt thực thi một tác vụ như vậy bằng cách nhấn tổ hợp Ctrl + C trong terminal.

Có thể theo dõi các nhóm tệp khác nhau, gán các tác vụ khác nhau cho chúng:

exports.default = function() {
	watch('src/*.less', task1);
	watch('src/*.sass', task1);
};

Hoặc có thể thực hiện một loạt tác vụ cho một nhóm:

exports.default = function() {
	watch('src/*.less', series(task1, task2));
};

Giả sử bạn có một nhóm tệp JavaScript. Hãy làm sao để các tệp này được hợp nhất thành một tệp, sau đó thực hiện thu nhỏ hóa tệp này. Hãy làm sao để tác vụ được thực hiện khi bất kỳ tệp nào của chúng ta thay đổi.