Dọn dẹp thư mục trước khi lưu trong Gulp

Bạn chắc hẳn đã nhận thấy rằng khi lưu tệp vào một thư mục, Gulp không xóa các tệp trước đó khỏi thư mục đó.

Để điều này xảy ra, cần cài đặt một plugin đặc biệt del.

Cài đặt nó bằng cách chạy lệnh sau:

npm install del --save-dev

Plugin này khác với những plugin đã sử dụng trước đây ở chỗ nó được sử dụng ngoài chuỗi phương thức pipe. Do đó, trong trường hợp này chúng ta phải tạo một nhóm tác vụ: tác vụ đầu tiên sẽ dọn sạch thư mục, và tác vụ thứ hai sẽ thực hiện công việc hữu ích.

Ví dụ, hãy chọn việc minify CSS làm công việc hữu ích.

Hãy kết nối tất cả những gì cần thiết:

let {src, dest, series} = require('gulp');
let cleanCSS = require('gulp-clean-css');
let del = require('del');

Tạo một tác vụ để dọn sạch thư mục dist:

function taskDel(cb) {
	return del('dist/*');
}

Tạo một tác vụ để minify CSS:

function taskCss(cb) {
	return src('src/*.css')
		.pipe(cleanCSS())
		.pipe(dest('dist'));
}

Thực hiện một chuỗi tác vụ:

exports.default = series(taskDel, taskCss);

Tổng hợp tất cả lại và chúng ta nhận được mã sau:

function taskDel(cb) {
	return del('dist/*');
}
function taskCss(cb) {
	return src('src/*.css')
		.pipe(cleanCSS())
		.pipe(dest('dist'));
}

exports.default = series(taskDel, taskCss);

Tạo một tác vụ để minify JavaScript. Dọn sạch thư mục trước mỗi lần chạy tác vụ.

Tạo một nhóm gồm ba tác vụ: tác vụ dọn sạch thư mục, tác vụ minify CSS và tác vụ minify JavaScript. Xác định tác vụ nào nên chạy tuần tự, và tác vụ nào - song song.