Gulp 기초 세팅

2.4.1. gulp-cli 전역(global) 설치

gulp-cli는 Gulp를 터미널에서 편리하게 실행할 수 있게 해주는 유틸리티 도구입니다.
터미널에서 아래 명령어를 입력해서 gulp-cli를 전역(global) NPM Package에 설치합니다.
(gulp-cli 설치는 해당 PC에서 Gulp를 사용한 적이 없을 경우 최초 한 번만 진행하면 됩니다.)

위 명령어 입력 예시)

명령어 입력 예시

2.4.2. gulp 설치

gulp는 gulp-cli와 다르게 전역으로 설치하지 않고, gulp_setting 폴더에만 설치하면 됩니다.
--save-dev(-D) 옵션을 추가하는 이유는 gulp가 개발 단계에서만 필요한 패키지이기 때문입니다.

설치가 완료되면 gulp_setting 폴더 하위로 node_modules 폴더와 package-lock.json 파일이 생성됩니다.

프로젝트 폴더에 Gulp 설치

또한, package.json의 devDependencies 부분에 방금 설치한 gulp가 업데이트됩니다.

							{
								"devDependencies": {
									"gulp": "^4.0.2"
								}
							}

2.4.3. 작업 폴더 생성 및 기초 파일 세팅

gulp_setting 폴더 하위로 src 폴더를 생성합니다.
src 폴더는 실제 작업 파일이 위치하는 폴더입니다. (html, css, js, images 등)
src 폴더에서 코딩을 하면, gulp는 src 폴더의 작업 파일을 dist 폴더로 빌드 하게 됩니다.

'dist'라는 폴더명은 'distribute(배포)'의 약자이며 고정된 이름이 아닙니다. 세팅하면서 자유롭게 이름을 지정할 수 있습니다.
다만 대부분의 환경에서(Gulp, Vue, React 등) 'dist'로 사용하기에 UXKM에서도 'dist'로 진행합니다.

아래 구조대로 폴더와 파일을 생성한 후 각각의 파일(scss, js, html)에 아래의 코드를 복사하세요.

폴더 구조 및 파일 생성

								/* 폴더명, 파일명을 복사하여 세팅하세요. */
								gulp_setting __folder_name__  // 각자 세팅한 폴더명
									src __folder_name__
										assets __folder_name__
											css __folder_name__
												style.scss __file_name__
												_reset.scss __file_name__
												_variable.scss __file_name__
											images __folder_name__
												visual.png __file_name__  // 'images 파일 세팅'에서 다운로드
											js __folder_name__
												main.js __file_name__
												util.js __file_name__
										html __folder_name__
											_templates __folder_name__
											index.html __file_name__

css 파일 세팅

								html, body, div, span, applet, object, iframe,
								h1, h2, h3, h4, h5, h6, p, blockquote, pre,
								a, abbr, acronym, address, big, cite, code,
								del, dfn, em, img, ins, kbd, q, s, samp,
								small, strike, strong, sub, sup, tt, var,
								b, u, i, center,
								dl, dt, dd, ol, ul, li,
								fieldset, form, label, legend,
								table, caption, tbody, tfoot, thead, tr, th, td,
								article, aside, canvas, details, embed,
								figure, figcaption, footer, header, hgroup,
								menu, nav, output, ruby, section, summary,
								time, mark, audio, video {
									margin: 0;
									padding: 0;
									border: 0;
									font-size: 100%;
									font: inherit;
									vertical-align: baseline;
								}
								/* HTML5 display-role reset for older browsers */
								article, aside, details, figcaption, figure,
								footer, header, hgroup, menu, nav, section {
									display: block;
								}
								body {
									line-height: 1;
								}
								ol, ul {
									list-style: none;
								}
								blockquote, q {
									quotes: none;
								}
								blockquote:before, blockquote:after,
								q:before, q:after {
									content: '';
									content: none;
								}
								table {
									border-collapse: collapse;
									border-spacing: 0;
								}

								$bg-color: #eee;
								$font-color: #006be2;

								@charset "utf-8";
								@import '_reset';
								@import '_variable';

								html {
									background-color: $bg-color;
								}

								.wrap {
									margin:0 20px;

									.header {
										display: flex;
										align-items: center;
										justify-content: space-between;
										padding: 15px;
										background-color: #ccc;
									}

									.container {
										h1 {
											margin-top: 20px;
											font-size: 26px;
											font-weight: bolder;
											color: $font-color;
										}
										.image_box {
											overflow:hidden;
											display: flex;
											flex-direction: column;
											margin-top: 20px;
											padding: 10px;
											background-color: #fff;
											box-shadow: 0 0 10px rgba(0,0,0,.1);
											border-radius: 10px;
										}
									}

									.footer {
										margin-top: 20px;
									}
								}

images 파일 세팅

아래 링크를 클릭하여 이미지를 다운로드하세요.
visual.png 다운로드

js 파일 세팅

								export const random = max => Math.floor(Math.random() * max);

								import {random} from './util';

								const randomOne = random(10);
								const randomTwo = random(20);

								console.log( `${randomOne} ${randomTwo}` );

html 파일 세팅

html 파일은 'Gulp NJK 세팅' 페이지에서 진행합니다.

2.4.4. gulpfile.js 생성

gulpfile.js는 gulp의 설정 파일이며 gulp가 해야 할 모든 작업을 정의해 줍니다.
npm으로 설치한 패키지들에 대한 각각의 역할을 선언하여, scss, less를 css로 또는 es6 문법을 일반 script 문법으로 변환 및 압축(min)을 하거나 images 파일을 무손실 압축하여 전체 이미지의 용량을 줄일 수도 있습니다.
앞서 언급된 것은 일부분이며 실제로 더 많은 편리한 것을 정의할 수 있습니다.

터미널에서 위 명령을 실행하면 아래처럼 gulpfile.js가 생성됩니다.

gulpfile.js 생성

생성된 gulpfile.js에 아래 코드를 붙여 넣습니다.

							const gulp = require('gulp');

							gulp.task('dev', function(){
								return console.log('gulp dev test !!!');
							});

							// 위 코드는 테스트용 코드로 곧 삭제될 코드입니다.

2.4.5. package.json에 gulp 실행 명령어 추가

터미널에서 gulp를 실행하기 위해 앞서 gulp-cli를 전역(global)로 설치했습니다.
이제는 gulp 실행 명령어를 package.json의 script에 추가합니다.

							{
								"scripts": {
									"test": "echo \"Error: no test specified\" && exit 1", // 이 줄은 삭제합니다.
									"dev": "gulp dev",     // 추가
									"build": "gulp build"  // 추가
								},
							}

터미널에서 방금 추가한 gulp dev 명령을 실행합니다.

명령을 실행하면 위에서 생성했던 gulpfile.js가 실행됩니다.

gulpfile.js 테스트

터미널에 gulp dev test !!! 텍스트가 출력이 된다면 여기까지의 세팅이 성공적으로 진행된 것입니다.
빨간색 에러 메시지는 우리가 dev라는 task와 gulpfile 전체에 대한 설정을 하지 않아서 이기 때문에 정상입니다.

2.4.6. .gitignore 파일 생성

요약 설명

.gitignore란 Git 버전 관리에서 제외할 파일 목록을 지정하는 파일입니다. git으로 프로젝트를 관리할 때, 그 프로젝트 안의 특정 파일들은 Git으로 관리할 필요가 없는 경우가 있습니다.

예를 들면,

NodeJS-Express로 개발할 때 npm module

Java 컴파일된(.class) 파일

AWS 비밀 키, JWT 비밀 키 등등이 있습니다.

npm 모듈은 용량이 크기도 하고, 프로젝트를 clone 받은 다음에 직접 npm install 해주는 것이 더 효율적이기 때문에 올리지 않습니다. 그리고 AWS 키, JWT 비밀 키 같은 것은 Github에 public으로 노출이 되면 악용될 사레가 있기 때문에 올리지 않아야 합니다.

아직 우리는 폴더를 git 저장소를 활용하여 Gulp 세팅을 하고 있지는 않지만 추후를 대비하고 반드시 알고 있어야 할 내용이므로 기초 세팅 단계에서 .gitignore 파일을 세팅을 합니다.
gulp_setting 폴더 하위로 .gitignore 파일을 생성합니다.

.gitignore 파일 생성

생성된 .gitignore 파일에 아래의 코드를 적용합니다. (주석은 제외합니다.)

							/.idea             <!-- Jet Brains 계열 에디터의 설정 폴더 -->
							/node_modules      <!-- 용량이 큰 npm module (패키지 설치기 자동 생성) -->
							/.publish          <!-- 배포(deploy) 단계에서 임시로 사용될 폴더 -->
							/.git              <!-- git 설정 폴더 (git 세팅 시 자동 생성) -->
							/dist              <!-- 컴파일 결과물 폴더 -->
							package-lock.json