Làm việc với tệp trong Gulp

Gulp cho phép lấy một nhóm tệp, thực hiện một số thao tác với nhóm này, sau đó đặt các tệp đã được thay đổi vào địa chỉ mới.

Để làm điều này, có các hàm đặc biệt là src và dest. Trước tiên hãy nhập chúng từ thư viện của chúng ta:

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

Hàm src cho phép lấy tệp được chỉ định:

function task(cb) {
	return src('src/styles.css'); // sử dụng return thay vì gọi cb
}

Sau đó, với tệp này, có thể thực hiện các thao tác khác nhau theo chuỗi bằng hàm pipe. Về mặt sơ đồ, nó trông như sau:

function task(cb) {
	return src('src/styles.css')
		.pipe(thao_tac_1)
		.pipe(thao_tac_2)
		.pipe(thao_tac_3)
}

Lệnh gọi pipe cuối cùng trong chuỗi kết thúc bằng hàm dest, chỉ định thư mục mà kết quả của các thao tác đã thực hiện sẽ được gửi đến:

function task(cb) {
	return src('src/styles.css')
		.pipe(thao_tac_1)
		.pipe(thao_tac_2)
		.pipe(thao_tac_3)
		.pipe(dest('dist')); // gửi đến thư mục dist
}

Mỗi thao tác thực hiện một số thay đổi đối với tệp của chúng ta. Ví dụ, trước tiên có thể chuyển đổi LESS thành CSS, sau đó thêm tiền tố cho các thuộc tính CSS, sau đó thu nhỏ CSS thu được và tiếp tục như vậy.

Mỗi thao tác có một plugin npm riêng dành cho Gulp. Các plugin cần được cài đặt và kết nối với tệp của chúng ta. Chúng ta sẽ tìm hiểu các plugin khác nhau trong các bài học tiếp theo.

Hiện tại, để khởi động, hãy lấy tệp của chúng ta và gửi một bản sao của nó vào thư mục dist, như thể đã thực hiện một số thao tác trên đó:

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

Tạo ba tệp CSS. Tạo ba nhiệm vụ công khai. Mỗi nhiệm vụ sẽ tạo một bản sao của một trong các tệp của chúng ta vào một thư mục đã chỉ định.

Mảng đường dẫn tới tệp

Hàm src có thể nhận không chỉ một tệp làm tham số, mà ngay lập tức nhiều tệp dưới dạng mảng:

function task(cb) {
	let files = [
		'src/styles1.css',
		'src/styles2.css'
	];
	
	return src(files)
		.pipe(dest('dist'));
}

Tạo ba tệp CSS. Tạo một nhiệm vụ, sao chép các tệp của chúng ta vào thư mục đã chỉ định.