요약 설명
이미지 최적화는 Gulp 작업뿐만 아니라 모든 웹 환경에서 필수적인 작업으로, 웹 성능 향상을 위해 필수입니다.
Gulp를 사용하면 더 편리하게 이미지 최적화 환경을 설정할 수 있습니다.
이미지 최적화가 필요한 이유는 다음과 같습니다.
Gulp를 사용하여 이미지를 최적화하면 이러한 이점을 쉽게 얻을 수 있습니다. Gulp 플러그인을 통해 이미지 최적화 작업을 자동화하고, 더 나은 성능과 사용자 경험을 제공할 수 있습니다.
터미널에서 아래 명령을 실행하여 gulp-image 패키지를 설치합니다.
npm install gulp-imagemin@7.1.0 -D
npm install gulp-newer -D
npm i gulp-imagemin@7.1.0 gulp-newer -D
gulp-imagemin는 Gulp를 사용하여 이미지 최적화를 수행하는 플러그인으로,
다양한 이미지 형식을 지원하고 파이프라인을 활용하여 간편하게 이미지 최적화 작업을 자동화할 수 있습니다.
gulp-imagemin는 다양한 이미지 최적화 도구 및 알고리즘을 사용하여 이미지를 압축하고 최적화합니다.
gulp-newer는 Gulp 플러그인 중 하나로, 변경된 파일만을 필터링하여 통과시키는 기능을 제공합니다.
변경된 이미지 파일만 최적화하여 전체 이미지를 다시 처리하지 않아도 되므로 빌드 시간을 단축할 수 있습니다.
중요합니다!
이미지는 웹 사이트 대부분의 용량을 차지합니다.
본 커리큘럼에서는 한 개의 이미지만 사용하기 때문에 큰 문제가 되지 않지만,
보통 웹 사이트에서는 이미지의 총용량이 2~5MB 이상이 되는 경우가 흔합니다.
이미지가 많고 용량이 크다면 Gulp 실행 시마다 이미지 최적화는 상당한 부담이 될 수 있습니다.
그래서 이번엔 두 가지 방법으로 나눠 gulpfile.babel.js를 세팅합니다.
본 UXKM Gulp 커리큘럼은 조금 더 이해하기 쉬운 1번 방식으로 마무리되지만,
만약 실제 프로젝트에 사용하고 이미지가 많다면 2번 방식을 추천합니다.
※ 아래 세팅 방법 중에서 프로젝트에 가장 적합한 방법을 선택하여 진행해 주세요.
// import -----------------------------------------------------------
// ··· 기존 import 생략 ···
import imagemin from "gulp-imagemin";
import newer from "gulp-newer";
// routes -----------------------------------------------------------
// etc --------------------------------------------------------------
// task -------------------------------------------------------------
// html task
// css task
// js task
// image task
const image = () => {
return gulp.src( path_src.images + '/**/*' ) // 최적화 이미지 대상
.pipe( newer( path_dist.images ) ) // 변경된 파일만 통과, 변경되지 않은 파일 건너뛰기
.pipe( imagemin( { verbose:true } ) ) // 이미지 최적화 ( 최적화 된 이미지의 정보 기록 옵션 적용 )
.pipe( gulp.dest( path_dist.images ) ); // 최적화 후 생성될 목적지 설정
}
// clean task
// webserver task
// 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);
// sass watch
const scss_watcher = gulp.watch(path_src.css + "/**/*", css);
file_management(scss_watcher, path_src.css, path_dist.css);
// js watch
const js_watcher = gulp.watch(path_src.js + "/**/*", js);
file_management(js_watcher, path_src.js, path_dist.js);
// image watch
const image_watcher = gulp.watch(path_src.images + "/**/*", image);
file_management(image_watcher, path_src.images, path_dist.images);
}
// watch - 파일 감시 및 삭제를 위한 함수
// series & parallel (task 그룹화) ----------------------------------
// 순차적으로 실행되어야 하는 task 그룹
const prepare = gulp.series([ clean, image ]);
// 위 prepare 실행 완료 후 순차적으로 실행되어야 하는 task 그룹
// 동시에 여러 개의 task가 실행되어야 하는 그룹 (병렬로 실행)
// export (gulp 실행 명령어) ----------------------------------------
// gulp build 실행 (prepare 실행 후 assets 실행) - build만 실행
// gulp dev 실행 (build 실행 후 live 실행) - 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";
import path from "path";
import gulpSass from "gulp-sass";
import dartSass from "dart-sass";
import sourcemaps from "gulp-sourcemaps";
import minificss from "gulp-minify-css";
import autoprefixer from "autoprefixer";
import postCss from "gulp-postcss";
import rename from "gulp-rename";
import dependents from "gulp-dependents";
import bro from "gulp-bro";
import babelify from "babelify";
import minify from "gulp-minify";
import imagemin from "gulp-imagemin";
import newer from "gulp-newer";
// 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 파일이 생성될 목적지 설정
}
// css task
const css = () => {
//scss 옵션 정의
const sass = gulpSass(dartSass); // ECMAScript 모듈(최신 Node.js 14 이상에서 지원됨)에서 사용하기 위해 선언
const options = {
scss : {
outputStyle: "expanded", // 컴파일 스타일: nested(default), expanded, compact, compressed
indentType: "space", // 들여쓰기 스타일: space(default), tab
indentWidth: 2, // 들여쓰기 칸 수 (Default : 2)
precision: 8, // 컴파일 된 CSS 의 소수점 자리수 (Type : Integer , Default : 5)
sourceComments: true, // 주석 제거 여부 (Default : false)
compiler: dartSass, // 컴파일 도구
},
postcss: [ autoprefixer({
overrideBrowserslist: 'last 2 versions', // 최신 브라우저 기준 하위 2개의 버전까지 컴파일
}) ]
};
return gulp.src(
path_src.css + '/**/*.scss', // 컴파일 대상 scss파일 찾기
{ since: gulp.lastRun(css) } // 변경된 파일에 대해서만 컴파일 진행
)
.pipe( plumber({errorHandler:onErrorHandler}) ) // 에러 발생 시 gulp종료 방지 및 에러 핸들링
// *.css 생성
.pipe( dependents() ) // 현재 스트림에 있는 파일에 종속되는 모든 파일을 추가
.pipe( sourcemaps.init() ) // 소스맵 작성
.pipe( sass(options.scss).on('error', sass.logError) ) // scss 옵션 적용 및 에러 발생 시 watch가 멈추지 않도록 logError 설정
.pipe( postCss(options.postcss) ) // 하위 브라우저 고려
.pipe( sourcemaps.write() ) // 소스맵 적용
.pipe( gulp.dest(path_dist.css) ) // 컴파일 후 css파일이 생성될 목적지 설정
// *.min.css 생성
.pipe( minificss() ) // 컴파일된 css 압축
.pipe( rename({ suffix: '.min' }) ) // 압축파일 *.min.css 생성
.pipe( sourcemaps.write() ) // 소스맵 적용
.pipe( gulp.dest(path_dist.css) ); // 컴파일 후 css파일이 생성될 목적지 설정
}
// js task
const js = () => {
return gulp.src([
path_src.js + '/main.js' // 트렌스파일 대상 경로 (util.js 는 main.js 에 import 하기 때문에 호출 안함)
])
.pipe( sourcemaps.init({ loadMaps: true }) ) // 소스맵 초기화 (기존의 소스 맵을 유지하고 수정하는 데 사용하기 위해 옵션 설정)
.pipe( bro({ // 트렌스파일 시작
transform: [
babelify.configure({ presets: ['@babel/preset-env'] }), // ES6 이상의 문법을 일반 브라우저가 코드를 이해할 수 있도록 변환
[ 'uglifyify', { global: true } ] // 코드 최소화 및 난독화
]
}) )
.pipe( sourcemaps.write('./') ) // 소스맵 작성
.pipe(minify({ // 트렌스파일된 코드 압축 및 min 파일 생성
ext: { min: '.min.js' }, // 축소된 파일을 출력하는 파일 이름의 접미사 설정
ignoreFiles: ['-min.js'] // 해당 패턴과 일치하는 파일을 축소하지 않음
}))
.pipe( gulp.dest(path_dist.js) ); // 트렌스파일 후 생성될 목적지 설정
}
// image task
const image = () => {
return gulp.src( path_src.images + '/**/*' ) // 최적화 이미지 대상
.pipe( newer( path_dist.images ) ) // 변경된 파일만 통과, 변경되지 않은 파일 건너뛰기
.pipe( imagemin( { verbose:true } ) ) // 이미지 최적화 ( 최적화 된 이미지의 정보 기록 옵션 적용 )
.pipe( gulp.dest( path_dist.images ) ); // 최적화 후 생성될 목적지 설정
}
// 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);
// sass watch
const scss_watcher = gulp.watch(path_src.css + "/**/*", css);
file_management(scss_watcher, path_src.css, path_dist.css);
// js watch
const js_watcher = gulp.watch(path_src.js + "/**/*", js);
file_management(js_watcher, path_src.js, path_dist.js);
// image watch
const image_watcher = gulp.watch(path_src.images + "/**/*", image);
file_management(image_watcher, path_src.images, path_dist.images);
}
// 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, image ]);
// 위 prepare 실행 완료 후 순차적으로 실행되어야 하는 task 그룹
const assets = gulp.series([ html, css, js ]);
// 동시에 여러 개의 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 ]);
gulpfile.babel.js 파일을 세팅한 후 터미널에서 아래 명령을 실행합니다.
gulp dev
Gulp가 샐행되고 터미널에 Gulp의 작업 내용이 출력됩니다.
clean 다음으로 image task가 실행되고,
gulp-imagemin이 visual.png 파일을 어느 정도 최적화했는지에 대한 메시지가 출력됩니다.
// import -----------------------------------------------------------
// ··· 기존 import 생략 ···
import imagemin from "gulp-imagemin";
// routes -----------------------------------------------------------
// etc --------------------------------------------------------------
// task -------------------------------------------------------------
// html task
// css task
// js task
// image task
// 이미지를 단순히 src에서 dist로 이동
const image = () => {
return gulp.src( path_src.images + '/**/*' ) // dist로 이동할 이미지 대상
.pipe( gulp.dest( path_dist.images ) ); // 이동 목적지 설정
}
// 이미지 최적화 후 dist로 이동
const image_optimization = () => {
return gulp.src( path_src.images + '/**/*' ) // 최적화 이미지 대상
.pipe( imagemin( { verbose:true } ) ) // 이미지 최적화 ( 최적화 된 이미지의 정보 기록 옵션 적용 )
.pipe( gulp.dest( path_dist.images ) ); // 최적화 후 생성될 목적지 설정
}
// clean task
// webserver task
// 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);
// sass watch
const scss_watcher = gulp.watch(path_src.css + "/**/*", css);
file_management(scss_watcher, path_src.css, path_dist.css);
// js watch
const js_watcher = gulp.watch(path_src.js + "/**/*", js);
file_management(js_watcher, path_src.js, path_dist.js);
// image watch
const image_watcher = gulp.watch(path_src.images + "/**/*", image);
file_management(image_watcher, path_src.images, path_dist.images);
}
// watch - 파일 감시 및 삭제를 위한 함수
// series & parallel (task 그룹화) ----------------------------------
// 순차적으로 실행되어야 하는 task 그룹
const prepare = gulp.series([ clean, image ]);
// 위 prepare 실행 완료 후 순차적으로 실행되어야 하는 task 그룹
// 동시에 여러 개의 task가 실행되어야 하는 그룹 (병렬로 실행)
// export (gulp 실행 명령어) ----------------------------------------
// gulp build 실행 (prepare 실행 후 assets 실행) - build만 실행
// gulp dev 실행 (build 실행 후 live 실행) - build 실행 후 live 실행
// gulp image_min 실행 (이미지 최적화 하나만을 위한 명령)
export const image_min = gulp.series([ image_optimization ]);
// 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";
import gulpSass from "gulp-sass";
import dartSass from "dart-sass";
import sourcemaps from "gulp-sourcemaps";
import minificss from "gulp-minify-css";
import autoprefixer from "autoprefixer";
import postCss from "gulp-postcss";
import rename from "gulp-rename";
import dependents from "gulp-dependents";
import bro from "gulp-bro";
import babelify from "babelify";
import minify from "gulp-minify";
import imagemin from "gulp-imagemin";
// 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 파일이 생성될 목적지 설정
}
// css task
const css = () => {
//scss 옵션 정의
const sass = gulpSass(dartSass); // ECMAScript 모듈(최신 Node.js 14 이상에서 지원됨)에서 사용하기 위해 선언
const options = {
scss : {
outputStyle: "expanded", // 컴파일 스타일: nested(default), expanded, compact, compressed
indentType: "space", // 들여쓰기 스타일: space(default), tab
indentWidth: 2, // 들여쓰기 칸 수 (Default : 2)
precision: 8, // 컴파일 된 CSS 의 소수점 자리수 (Type : Integer , Default : 5)
sourceComments: true, // 주석 제거 여부 (Default : false)
compiler: dartSass, // 컴파일 도구
},
postcss: [ autoprefixer({
overrideBrowserslist: 'last 2 versions', // 최신 브라우저 기준 하위 2개의 버전까지 컴파일
}) ]
};
return gulp.src(
path_src.css + '/**/*.scss', // 컴파일 대상 scss파일 찾기
{ since: gulp.lastRun(css) } // 변경된 파일에 대해서만 컴파일 진행
)
.pipe( plumber({errorHandler:onErrorHandler}) ) // 에러 발생 시 gulp종료 방지 및 에러 핸들링
// *.css 생성
.pipe( dependents() ) // 현재 스트림에 있는 파일에 종속되는 모든 파일을 추가
.pipe( sourcemaps.init() ) // 소스맵 작성
.pipe( sass(options.scss).on('error', sass.logError) ) // scss 옵션 적용 및 에러 발생 시 watch가 멈추지 않도록 logError 설정
.pipe( postCss(options.postcss) ) // 하위 브라우저 고려
.pipe( sourcemaps.write() ) // 소스맵 적용
.pipe( gulp.dest(path_dist.css) ) // 컴파일 후 css파일이 생성될 목적지 설정
// *.min.css 생성
.pipe( minificss() ) // 컴파일된 css 압축
.pipe( rename({ suffix: '.min' }) ) // 압축파일 *.min.css 생성
.pipe( sourcemaps.write() ) // 소스맵 적용
.pipe( gulp.dest(path_dist.css) ); // 컴파일 후 css파일이 생성될 목적지 설정
}
// js task
const js = () => {
return gulp.src([
path_src.js + '/main.js' // 트렌스파일 대상 경로 (util.js 는 main.js 에 import 하기 때문에 호출 안함)
])
.pipe( sourcemaps.init({ loadMaps: true }) ) // 소스맵 초기화 (기존의 소스 맵을 유지하고 수정하는 데 사용하기 위해 옵션 설정)
.pipe( bro({ // 트렌스파일 시작
transform: [
babelify.configure({ presets: ['@babel/preset-env'] }), // ES6 이상의 문법을 일반 브라우저가 코드를 이해할 수 있도록 변환
[ 'uglifyify', { global: true } ] // 코드 최소화 및 난독화
]
}) )
.pipe( sourcemaps.write('./') ) // 소스맵 작성
.pipe(minify({ // 트렌스파일된 코드 압축 및 min 파일 생성
ext: { min: '.min.js' }, // 축소된 파일을 출력하는 파일 이름의 접미사 설정
ignoreFiles: ['-min.js'] // 해당 패턴과 일치하는 파일을 축소하지 않음
}))
.pipe( gulp.dest(path_dist.js) ); // 트렌스파일 후 생성될 목적지 설정
}
// image task
// 이미지를 단순히 src에서 dist로 이동
const image = () => {
return gulp.src( path_src.images + '/**/*' ) // dist로 이동할 이미지 대상
.pipe( gulp.dest( path_dist.images ) ); // 이동 목적지 설정
}
// 이미지 최적화 후 dist로 이동
const image_optimization = () => {
return gulp.src( path_src.images + '/**/*' ) // 최적화 이미지 대상
.pipe( imagemin( { verbose:true } ) ) // 이미지 최적화 ( 최적화 된 이미지의 정보 기록 옵션 적용 )
.pipe( gulp.dest( path_dist.images ) ); // 최적화 후 생성될 목적지 설정
}
// clean task
const clean = () => del([dist]); // dist 폴더 삭제
// webserver task
const webserver = () => {
return gulp.src(dist) // webserver를 실행 할 폴더 경로
.pipe(
ws({ // webserver 옵션 설정
port: 8300, // 기본 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);
// sass watch
const scss_watcher = gulp.watch(path_src.css + "/**/*", css);
file_management(scss_watcher, path_src.css, path_dist.css);
// js watch
const js_watcher = gulp.watch(path_src.js + "/**/*", js);
file_management(js_watcher, path_src.js, path_dist.js);
// image watch
const image_watcher = gulp.watch(path_src.images + "/**/*", image);
file_management(image_watcher, path_src.images, path_dist.images);
}
// 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, image ]);
// 위 prepare 실행 완료 후 순차적으로 실행되어야 하는 task 그룹
const assets = gulp.series([ html, css, js ]);
// 동시에 여러 개의 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 ]);
// gulp image_min 실행 (이미지 최적화 하나만을 위한 명령)
export const image_min = gulp.series([ image_optimization ]);
gulpfile.babel.js 파일을 세팅한 후 터미널에서 아래 명령을 실행합니다.
gulp dev
Gulp가 샐행되고 터미널에 Gulp의 작업 내용이 출력됩니다.
clean 다음으로 image task가 실행됩니다.
실시간 이미지 최적화 프로세스 설정과는 달리, 이미지 최적화 작업을 하지 않고
단순히 src의 이미지를 dist로 옮기는 작업만 진행하기에 image task의 작업 시간도 짧습니다.
프로젝트 작업 중 이미지 최적화가 필요한 시점에 gulp dev를 종료하지 않고,
새 터미널을 열고 아래 명령을 실행합니다.
(같은 폴더에 여러 개의 터미널 오픈이 가능합니다.)
gulp image_min
image_min이 단독으로 실행되고 터미널에 image_min의 작업 내용이 출력됩니다.
visual.png에 대한 이미지 최적화가 진행되고,
이미지 최적화를 마친 image_min 프로세스는 자동으로 종료됩니다.
이렇게 이미지 최적화 프로세스를 별도로 실행하는 방식으로 설정하면
이미지 최적화 작업을 빌드 프로세스와 분리하여,
빌드 시간을 단축하고 이미지 최적화 작업을 효율적으로 관리할 수 있습니다.
그러나 별도로 이미지 최적화 작업을 실행해야 하는 번거로움이 있을 수 있습니다.
이러한 방식은 장단점이 모두 있지만, 프로젝트 환경에 따라 어느 쪽이 더 큰 장점을 가지는지 선택하면 됩니다.
독립적인 이미지 최적화 프로세스 설정 이외에도,
이미지 최적화를 배포 단계에서 자동으로 실행하도록 설정할 수도 있습니다.
그러나 이것은 응용 단계에 해당하여 본 커리큘럼에는 포함시키지 않았습니다.
image task를 세팅하기 전에는,
브라우저에서 이미지를 찾지 못하고, Console에서 경고 메시지가 나타났지만 이제는 모든 것이 정상으로 보이게 됩니다.
또한, 이미지 용량이 886KB에서 854KB로 줄어든 것을 확인할 수 있습니다.
dist > assets > images 폴더 안에 visual.png 파일이 있는 것을 확인할 수 있습니다.
여기까지 우리는 로컬 작업을 위한 Gulp 설정을 완료했습니다.
생소한 시스템과 언어에 처음 마주쳤지만, 웹 퍼블리싱을 위한 기본 세팅을 훌륭하게 마무리했습니다.
당연히 아직 Gulp가 익숙하지 않고, 커리큘럼 없이 혼자 세팅하는 건 어려울 수 있습니다.
하지만 앞서 안내했듯이 한 번의 세팅으로 끝나지 않고 여러 번 반복하고 응용하다 보면 Gulp가 꾀 친숙해질 것입니다.
Gulp는 여기까지만 해도 충분합니다. 다음 커리큘럼은 선택사항입니다.
다음 섹션에서는 Gulp로 설정하고 빌드한 결과물을 GitHub에 배포하기 위해 gulp-gh-pages 패키지를 활용하는 과정을 살펴봅니다.
전제로 git과 GitHub를 기본적으로 활용할 수 있다는 가정하에 커리큘럼을 진행하기 때문에, git과 GitHub가 생소하다면 커리큘럼 진행이 어려울 수 있습니다.
※ 다음 커리큘럼에서는 [실시간 이미지 최적화 프로세스로 설정]한
gulpfile.babel.js를 이어서 진행하며,
git과 GitHub를 설명하는 내용은 다루지 않습니다.