Gulp를 통한 빌드 환경 구축

왜 Gulp를 사용해야 하는지

• image sprite 자동화
• 이미지 최적화
• 브라우저 별 css prefixer 붙이기
• SCSS 컴파일
• pug template 컴파일
• js 트랜스파일링(es6 to es 5)
• css, js 압축 (경량화)
• 웹서버 띄우기
• 유닛 테스트

Gulp 설치하기

공식 문서 : https://gulpjs.com/docs/en/getting-started/quick-start

1. 전역에 npm package에 gulp 설치

npm install gulp-cli -g

npm install 중, permission denied 에러 발생시 해결 방법

참고 사이트

• npm doc

• 관련 포스팅

• 자주 사용하는 터미널 명령어

2. 프로젝트 폴더 생성 후, vscode로 터미널에서 아래 파일 구조로 폴더와 파일 생성
3. 프로젝트 초기 설정

npm init

4. 기본 파일 구조 짜기
5. gulpfile.js 파일 생성
6. package.jason 파일에 gulp 설치

npm add gulp -D

참고 : <걸프 90분 마스터 하기> 노마드 강의