Gulp에서 파일 병합하기

CSS 코드를 작성할 때는 여러 파일로 나누는 것이 편리합니다. 그러나 파일이 많을수록 웹사이트 페이지 로딩 속도가 느려집니다. 결과적으로, 코드를 작성할 때는 여러 파일에서 작업하는 것이 편리하지만, HTML에 연결할 때는 이러한 파일들을 하나로 합치는 것이 좋습니다.

이를 위해 특별한 플러그인 gulp-concat이 도움이 될 것입니다. 이 플러그인을 우리 프로젝트에 설치해 봅시다: 우리 프로젝트에 설치해 봅시다:

npm install gulp-concat --save-dev

그런 다음 설치한 플러그인을 가져옵니다:

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

이 플러그인을 사용하여 여러 CSS 파일을 하나로 합쳐봅시다:

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

여러 JavaScript 파일을 하나로 병합하세요.

병합된 파일에 대한 작업

병합 후에는 체인을 따라 하나의 병합된 파일만 이동하게 되며, 이 파일에 대해 다양한 작업을 수행할 수 있습니다.

예를 들어 CSS 최소화를 수행해 봅시다:

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

여러 LESS 파일을 하나로 병합한 다음, 이 파일을 CSS로 변환하고, 얻은 CSS를 최소화하세요.