Web Server - by. UXKM

Gulp
Web Server & Watching Files
Web Server

요약 설명

gulp-webserver는 Gulp 작업 중에 간단한 로컬 웹 서버를 실행해주는 플러그인으로, 별도의 복잡한 서버 설정 없이 로컬 개발 환경을 구축할 수 있게 도와줍니다.
gulp.watch를 이용해 파일의 변경이나 업데이트를 감지하면 브라우저에 실시간으로 반영하는 Live Reload 시스템을 구현할 수 있고, 이 Live Reload 기능이 정상적으로 작동하는지 확인하려면 먼저 gulp-webserver의 세팅이 선행되어야 합니다.

5.1.1. gulp-webserver 설치

터미널에서 아래 명령을 실행하여 gulp-webserver를 설치합니다.

5.1.2. gulpfile.babel.js 세팅

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

							// import -----------------------------------------------------------
							// ··· 기존 import 생략 ···
							import ws from "gulp-webserver"; --add--


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


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


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

							// html task --no_change--

							// clean task --no_change--

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


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

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

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

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


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

							// gulp build 실행 (prepare 실행 후 assets 실행) - build만 실행 --edit-- --edit_txt:설명 주석 수정
							export const build = gulp.series([ prepare, assets ]);

							// gulp dev 실행 (build 실행 후 live 실행) - build 실행 후 live 실행 --edit-- --edit_txt:설명 주석 수정 및 live task 추가
							export const dev = gulp.series([ build, live ]);

							// 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";


							// 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)
									})
								);
							}


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

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

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

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


							// 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 ]);

gulp-webserver의 상세한 옵션은 npm gulp-webserver#options 에서 확인 가능합니다.

5.1.3. gulp dev 실행

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

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

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

Gulp 실행 후 두 가지의 변경 사항을 확인할 수 있습니다.

기존까지는 build series 까지만 실행됐기 때문에 dev가 종료되면 Gulp도 종료되어 명령어를 입력할 수 있는 상태로 돌아갔지만, 지금은 build series 실행 후 live series에서 webserver가 실행되고 dev는 종료되지만 webserver 동작을 위해 gulp 프로세스는 유지됩니다.
Gulp의 작업 내용에 webserver 시작과 종료(빨간색 박스)가 추가되고, 아래처럼 localhost:8000 주소로 브라우저가 열립니다.

gulp-webserver로 브라우저가 열린 화면

아직 css task, image task를 세팅하지 않았기 때문에 css가 적용되지 않고 image가 보이지 않는 것이 정상입니다.

5.1.4. gulp 프로세스 종료

위 [gulp dev 실행]에서 확인했듯이 현재 시점에서 gulp dev를 실행하면 프로세스가 유지되고 커맨드를 입력할 수 없습니다.
이때, Gulp 프로세스를 종료하려면 터미널에서 control + C 입력 후 y를 입력해야 합니다.

gulp dev 프로세스 종료

Gulp가 종료되고 webserver도 종료되었기 때문에 브라우저에서는 '사이트에 연결할 수 없음' 메시지가 표시됩니다.

gulp 종료 후 브라우저 화면