Gulp에서 저장 전 폴더 정리하기

아마도 이미 눈치채셨겠지만, 파일들을 폴더에 저장할 때 Gulp는 이전 파일들을 삭제하지 않습니다.

이를 가능하게 하려면 특별한 플러그인인 del을 설치해야 합니다.

다음 명령어를 실행하여 설치해 보겠습니다:

npm install del --save-dev

이 플러그인은 우리가 이전에 사용했던 것들과 달리, pipe 메서드 체인 외부에서 사용됩니다. 따라서 이 경우 우리는 태스크 그룹을 생성해야 합니다: 첫 번째 태스크는 폴더를 정리하고, 두 번째 태스크는 실제 작업을 수행합니다.

예를 들어 실제 작업으로 CSS 최소화를 선택해 보겠습니다.

필요한 모든 모듈을 가져와 봅시다:

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

dist 폴더를 정리하는 태스크를 만들어 보겠습니다:

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

CSS를 최소화하는 태스크를 만들어 보겠습니다:

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

일련의 태스크들을 실행해 보겠습니다:

exports.default = series(taskDel, taskCss);

모든 코드를 합치면 다음과 같습니다:

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

exports.default = series(taskDel, taskCss);

JavaScript 최소화 태스크를 만드세요. 태스크를 실행하기 전에 매번 폴더를 정리하도록 하세요.

세 가지 태스크로 구성된 그룹을 만드세요: 폴더 정리 태스크, CSS 최소화 태스크, 그리고 JavaScript 최소화 태스크. 어떤 태스크들이 순차적으로 실행되어야 하고, 어떤 태스크들이 병렬로 실행될 수 있는지 결정하세요.