Kết hợp tệp trong Gulp

Khi viết mã CSS, việc chia nhỏ nó thành nhiều tệp là thuận tiện. Tuy nhiên, càng nhiều tệp thì trang web sẽ tải càng chậm. Do đó, khi viết mã thì làm việc với nhiều tệp là thuận tiện, nhưng khi kết nối với HTML thì cần hợp nhất các tệp này thành một.

Một plugin đặc biệt gulp-concat sẽ giúp chúng ta việc này. Hãy cài đặt nó vào dự án của chúng ta:

npm install gulp-concat --save-dev

Sau đó, nhập khẩu plugin đã cài đặt:

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

Hãy sử dụng nó để kết hợp một số tệp CSS thành một:

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

Kết hợp nhiều tệp JavaScript thành một.

Thao tác với tệp đã hợp nhất

Sau khi kết hợp, chỉ còn một tệp hợp nhất di chuyển dọc theo chuỗi và chúng ta có thể thực hiện các thao tác khác nhau trên nó.

Ví dụ, hãy thực hiện minimisation CSS:

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

Kết hợp nhiều tệp LESS thành một, sau đó chuyển đổi tệp này sang CSS, sau đó thực hiện minimisation CSS thu được.