Gulp에서 문서 변경 감시하기

필요할 때마다 콘솔에서 명령어를 호출하는 것은 매우 번거로운 일입니다. 특히 코드를 작성할 때는 이런 작업을 매우 자주 해야 하기 때문입니다.

따라서 Gulp에는 파일 변경을 감시하기 위한 특별한 함수 watch가 내장되어 있습니다. 추적 중인 파일 중 하나가 변경되면 해당 작업이 자동으로 실행됩니다.

LESS를 CSS로 변환하는 예를 살펴보겠습니다. 먼저 필요한 모든 모듈을 연결하겠습니다:

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

이제 변환 작업을 만들겠습니다:

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

이제 내부에서 파일 변경을 감시하고, 이 경우 우리의 작업을 호출할 익명 함수를 익스포트해 보겠습니다:

exports.default = function() {
	watch('src/*.less', task);
};

명령줄에서 실행한 후에는 "영구적인" 작업이 실행됩니다. 이는 이 터미널에 다른 명령어를 입력할 수 없음을 의미합니다. 이러한 작업의 실행은 터미널에서 Ctrl + C 조합을 눌러 중단할 수 있습니다.

다양한 파일 그룹을 감시하고 다양한 작업을 연결할 수 있습니다:

exports.default = function() {
	watch('src/*.less', task1);
	watch('src/*.sass', task1);
};

또는 하나의 그룹에 대해 일련의 작업을 실행할 수 있습니다:

exports.default = function() {
	watch('src/*.less', series(task1, task2));
};

JavaScript 파일 그룹이 있다고 가정해 보겠습니다. 이 파일들을 하나의 파일로 병합한 다음, 해당 파일의 최소화가 수행되도록 만드세요. 우리 파일 중 하나라도 변경되면 작업이 실행되도록 설정하세요.