Watching Files - by. UXKM

2024-06-04

요약 설명

파일의 변경 또는 업데이트가 있고 그 결과물을 확인하려면 반드시 build 과정을 거쳐야 합니다.
gulp.watch를 이용하여 작업 시 파일의 변경, 업데이트 등을 감지하고 해당 task의 build를 진행한 후 실시간으로 브라우저에 반영할 수 있습니다.

5.1.1. path 설치

터미널에서 아래 명령을 실행하여 path를 설치합니다.
path는 파일과 디렉터리의 경로를 추출하는데 사용하는 모듈이고, gulp-watch에서는 src 폴더의 파일을 삭제했을 때 dist 폴더의 같은 파일을 삭제할 때에 경로를 탐색하는 용도로 사용됩니다.
※ gulp-watch는 gulp의 내장 api이므로 별도의 패키지 설치가 필요 없습니다.

5.2.2. gulpfile.babel.js 세팅

gulpfile.babel.js 파일의 코드를 아래처럼 추가 및 수정합니다. (영역별 설명은 주석으로 대체합니다.)
변경이 없는 부분은 생략되며, 추가된 부분과 수정, 삭제된 부분의 코드만 표시됩니다.
또한 변경 없음, 추가된 부분, 수정, 삭제된 부분을 표시하는 텍스트는 마우스 드래그로 선택되지 않으므로 편리하게 코드를 복사할 수 있습니다.
전체 코드는 에디터기 오른쪽 [View full code]를 클릭하여 확인할 수 있습니다.

							// import -----------------------------------------------------------
							// ··· 기존 import 생략 ···
							import path from "path";


							// routes -----------------------------------------------------------
							--no_change--


							// etc --------------------------------------------------------------
							--no_change--


							// task -------------------------------------------------------------

							// html task --no_change--

							// clean task --no_change--

							// webserver task --no_change--

							// watch task --add--
							const watch = () => {
								const html_watcher = gulp.watch(path_src.html + "/**/*", html);
								file_management(html_watcher, path_src.html, path_dist.html);
							}
							// watch - 파일 감시 및 삭제를 위한 함수 --add-- --add_txt:scss, js 부분은 미리 추가됨
							const file_management = (watcher_target, src_path, dist_path) => {
								watcher_target.on('unlink', (filepath) => {
									const filePathFromSrc = path.relative(path.resolve(src_path), filepath);
									const extension_type = filePathFromSrc.split('.')[filePathFromSrc.split('.').length-1];
									 
									// scss 삭제 (min 파일까지 삭제)
									if( extension_type === 'scss' ){
										const destFilePath_css = path.resolve(dist_path, filePathFromSrc).replace('.scss','.css');
										del.sync(destFilePath_css);
										const destFilePath_minCss = path.resolve(dist_path, filePathFromSrc).replace('.scss','.min.css');
										del.sync(destFilePath_minCss);
									}
									 
									// js 삭제 (min 파일까지 삭제)
									else if( extension_type === 'js' ){
										const destFilePath_js = path.resolve(dist_path, filePathFromSrc);
										del.sync(destFilePath_js);
										const destFilePath_minJs = path.resolve(dist_path, filePathFromSrc).replace('.js','.min.js');
										del.sync(destFilePath_minJs);
									}
									 
									// njk(html) 삭제
									else if( extension_type === 'njk' ){
										const destFilePath_html = path.resolve(dist_path, filePathFromSrc).replace('.njk','.html');
										del.sync(destFilePath_html);
									}
									 
									// 위 파일 외 삭제
									else{
										const destFilePath = path.resolve(dist_path, filePathFromSrc);
										del.sync(destFilePath);
									}
								});
							}


							// series & parallel (task 그룹화) ----------------------------------

							// 순차적으로 실행되어야 하는 task 그룹 --no_change--

							// 위 prepare 실행 완료 후 순차적으로 실행되어야 하는 task 그룹 --no_change--

							// 동시에 여러 개의 task가 실행되어야 하는 그룹 (병렬로 실행) --edit-- --edit_txt:watch task 추가
							const live = gulp.parallel([ webserver, watch ]);


							// export (gulp 실행 명령어) ----------------------------------------

							// gulp build 실행 (prepare 실행 후 assets 실행) - build만 실행 --no_change--

							// gulp dev 실행 (build 실행 후 live 실행) - build 실행 후 live 실행 --no_change--

							// import -----------------------------------------------------------
							import gulp from "gulp";
							import nunjucksRender from "gulp-nunjucks-render";
							import plumber from "gulp-plumber";
							import data from "gulp-data";
							import cached from "gulp-cached";
							import fs from "fs";
							import del from "del";
							import ws from "gulp-webserver";
							import path from "path";


							// routes -----------------------------------------------------------
							const src = './src';
							const dist = './dist';
							const ass = '/assets';

							// src 폴더의 경로 설정
							const path_src = {
								html: src + '/html',
								css: src + ass + '/css',
								images: src + ass + '/images',
								js: src + ass + '/js',
							}

							// 빌드될 dist 폴더의 경로 설정
							const path_dist = {
								html: dist,
								css: dist + ass + '/css',
								images: dist + ass + '/images',
								js: dist + ass + '/js',
							};


							// etc --------------------------------------------------------------
							const onErrorHandler = (error) => console.log(error);  // plumber option (에러 발생 시 에러 로그 출력)


							// task -------------------------------------------------------------

							// html task
							const html = () => {
								// 들여쓰기(Tab Indent) 조정을 위한 함수
								const manageEnvironment = (environment) => {
									environment.addFilter('tabIndent', (str, numOfIndents, firstLine) => {
										str = str.replace(/^(?=.)/gm, new Array(numOfIndents + 1).join('\t'));
										if(!firstLine) {
											str = str.replace(/^\s+/, "");
										}
										return str;
									});
								};

								// _gnb.json 파일 적용을 위한 변수
								const gnbJson = JSON.parse(fs.readFileSync(path_src.html + '/_templates/_json/_gnb.json'));
								const json_all = {...gnbJson};
								const datafile = () => {
									return json_all;
								}

								// njk 빌드
								return gulp.src([
									path_src.html + '/**/*',                           // 빌드할 njk 파일 경로
									'!' + path_src.html + '/**/_*',                    // 경로 중 제외할 njk 파일(빌드 때 병합될 파일)
									'!' + path_src.html + '/**/_*/**/*'                // 경로 중 제외할 폴더 및 폴더의 njk 파일(빌드 때 병합될 파일)
								])
								.pipe( plumber({errorHandler:onErrorHandler}) )      // 에러 발생 시 gulp 종료 방지 및 에러 핸들링
								.pipe( data( datafile) )                             // _gnb.json 적용
								.pipe( nunjucksRender({                              // njk 적용
									envOptions: {                                      // njk 옵션 설정
										autoescape: false,                               // njk 문법의 오류가 있더라도 진행
									},
									manageEnv: manageEnvironment,                      // 들여쓰기(Tab Indent) 함수 적용
									path: [path_src.html],                             // html 폴더 전체 경로
								}) )
								.pipe( cached('html') )                              // 변경된 파일 캐시 저장
								.pipe( gulp.dest(path_dist.html) )                   // 빌드 후 html 파일이 생성될 목적지 설정
							}

							// clean task
							const clean = () => del([dist]);                       // dist 폴더 삭제

							// webserver task
							const webserver = () => {
								return gulp.src(dist)                                // webserver를 실행 할 폴더 경로
								.pipe(
									ws({                                               // webserver 옵션 설정
										// port: 8000,                                   // 기본 8000, 필요 시 변경 가능
										livereload: true,                                // 작업 중 파일 저장 시 브라우저 자동 새로고침 (기본 false)
										open: true                                       // Gulp 실행 시 자동으로 브라우저를 띄우고 localhost 서버 열기 (기본 false)
									})
								);
							}

							// watch task
							const watch = () => {
								// njk(html) watch
								const html_watcher = gulp.watch(path_src.html + "/**/*/**/*", html);
								file_management(html_watcher, path_src.html, path_dist.html);
							}
							// watch - 파일 감시 및 삭제를 위한 함수
							const file_management = (watcher_target, src_path, dist_path) => {
								watcher_target.on('unlink', (filepath) => {
									const filePathFromSrc = path.relative(path.resolve(src_path), filepath);
									const extension_type = filePathFromSrc.split('.')[filePathFromSrc.split('.').length-1];
									 
									// scss 삭제 (min 파일까지 삭제)
									if( extension_type === 'scss' ){
										const destFilePath_css = path.resolve(dist_path, filePathFromSrc).replace('.scss','.css');
										del.sync(destFilePath_css);
										const destFilePath_minCss = path.resolve(dist_path, filePathFromSrc).replace('.scss','.min.css');
										del.sync(destFilePath_minCss);
									}
									 
									// js 삭제 (min 파일까지 삭제)
									else if( extension_type === 'js' ){
										const destFilePath_js = path.resolve(dist_path, filePathFromSrc);
										del.sync(destFilePath_js);
										const destFilePath_minJs = path.resolve(dist_path, filePathFromSrc).replace('.js','.min.js');
										del.sync(destFilePath_minJs);
									}
									 
									// njk(html) 삭제
									else if( extension_type === 'njk' ){
										const destFilePath_html = path.resolve(dist_path, filePathFromSrc).replace('.njk','.html');
										del.sync(destFilePath_html);
									}
									 
									// 위 파일 외 삭제
									else{
										const destFilePath = path.resolve(dist_path, filePathFromSrc);
										del.sync(destFilePath);
									}
								});
							}


							// series & parallel (task 그룹화) ----------------------------------

							// 순차적으로 실행되어야 하는 task 그룹
							const prepare = gulp.series([ clean ]);

							// 위 prepare 실행 완료 후 순차적으로 실행되어야 하는 task 그룹
							const assets = gulp.series([ html ]);

							// 동시에 여러 개의 task가 실행되어야 하는 그룹 (병렬로 실행)
							const live = gulp.parallel([ webserver, watch ]);


							// export (gulp 실행 명령어) ----------------------------------------

							// gulp build 실행 (prepare 실행 후 assets 실행) - build만 실행
							export const build = gulp.series([ prepare, assets ]);

							// gulp dev 실행 (build 실행 후 live 실행) - build 실행 후 live 실행
							export const dev = gulp.series([ build, live ]);

5.2.3. gulp dev 실행

gulpfile.babel.js 파일을 세팅한 후 터미널에서 아래 명령을 실행합니다.

Gulp가 샐행되고 터미널에 Gulp의 작업 내용이 출력됩니다.

gulp dev 실행시 터미널에 작업내용 출력

watch가 실행되는 것을 확인할 수 있고, watch는 gulp 프로세스를 종료시킬 때까지 계속해서 지정한 파일을 감시해야 하기 때문에 종료되지 않습니다.

5.2.4. gulp-watch 동작 확인

파일 생성

src > html 폴더에 임의로 test_file.njk를 생성하면 gulp는 html로 빌드하여 dist 폴더에 test_file.html을 생성합니다. (아래 영상 참고)

파일 삭제

방금 생성한 src > html 폴더의 test_file.njk를 삭제하면 gulp-watch는 이를 감지하여 dist 폴더의 test_file.html을 삭제합니다. (아래 영상 참고)

파일 감시

index.njk에 코드를 추가하고 저장(Ctrl + s 또는 Command + s)하면 gulp는 빌드를 진행하고 변경된 내용을 브라우저에 실시간으로 반영합니다.