gulp 에 대해 알아보기

Gulp는 자바스크립트를 포함해서 HTML, CSS(SCSS), 이미지 등 다양한 웹 자산을 자동으로 처리해주는 개발 자동화 도구야.

하지만 Gulp 자체가 자바스크립트 “컴파일러”는 아니야.

정확히 말하면 Gulp는 **“자동화 도구(Automation Toolkit)”**로서, 우리가 원하는 작업들을 정의해두면 그걸 자동으로 실행해주는 역할을 해.

 

 

✅ Gulp가 하는 일 (예시)

Gulp는 다음과 같은 "작업(Task)"들을 자동화할 수 있어:

작업 종류설명

SCSS → CSS 컴파일	gulp-sass 같은 플러그인으로 Sass를 CSS로 변환
JS 파일 합치기/압축	여러 JS 파일을 하나로 합치고(minify), 용량 줄이기
HTML include	여러 HTML 파일을 조립하는 템플릿 처리
이미지 sprite	이미지 여러 개를 하나로 합치기 (sprite)
파일 변경 감시	파일 수정되면 자동으로 관련 task 실행 (watch)
소스맵 생성	압축된 코드와 원본 코드의 연결 정보 생성

 

---

🔧 자바스크립트도 자동 처리 가능

예를 들어 JS 관련 작업도 이렇게 가능해:

js

복사편집

gulp.task('js:combine', function(){ return gulp.src('src/js/**/*.js') // 여러 JS 파일을 .pipe(concat('app.min.js')) // 하나로 합치고 .pipe(uglify()) // 압축하고 .pipe(gulp.dest('dist/js')); // dist 폴더에 저장 });

---

🔄 Gulp = "자동 실행기"

Gulp는 **"작업을 수행하는 명령어 모음집 + 자동실행기"**라고 보면 돼.
컴파일, 압축, 이동 등 실제 작업은 플러그인들이 처리하고,
Gulp는 그 작업들을 연결해서 자동화해주는 관리자 역할이야.

---

만약 진짜 "JS 컴파일러"가 궁금하다면?

도구역할

Babel	최신 JS(ES6+)를 구형 브라우저용 JS로 변환 (컴파일러)
TypeScript	TS → JS로 컴파일
Webpack	모듈 번들러이자 컴파일 도구

 

이런 도구들은 JS 자체를 변환하거나 트랜스파일해주는 도구야.

---

🟢 정리

Gulp는 JS를 포함한 모든 프론트 작업을 자동화해주는 도구이지,
JS 자체를 컴파일해주는 도구는 아니야.
컴파일은 Babel이나 TypeScript 같은 도구가 맡고,
Gulp는 그런 작업들을 자동으로 실행해줘.

 

 

Q: 처음에 html, scss:compile, single scss:compile 실행하면 되는 거야?
👉 정답: 네!

• 처음에는 이 세 가지 task (html, scss:compile, [single] scss:compile)를 수동으로 한 번 실행해줘야 해.
• 그다음 watch를 실행하면 변경 사항이 감지되면서 자동으로 다시 컴파일 돼.

---

✅ 추천 워크플로우

bash

복사편집

# 1. 처음 전체 빌드 gulp # 또는 각각 따로 실행도 가능 gulp html gulp scss:compile gulp "[single] scss:compile" # 2. 그다음 감시 시작 gulp watch

---

💡 팁: default에 watch도 포함시키고 싶다면?

js

복사편집

gulp.task('default', gulp.series(['html', 'js:combine', 'scss:compile', '[single] scss:compile', 'watch']));

이렇게 해두면 gulp 한 번으로:

• 초기 빌드 +
• 파일 변경 감시까지 자동으로 다 되니까 아주 편해져.