Windows 시스템에서 Gulp를 전역적으로 설치하는 방법을 단계별로 정리했습니다. 대부분의 과정은 Mac에서도 동일하게 적용되지만, 일부 명령어 문법은 운영체제에 따라 조금씩 다를 수 있습니다.
1단계: Node.js와 npm 다운로드 및 설치
가장 먼저 컴퓨터에 Node.js와 npm(Node Package Manager)이 설치되어 있어야 합니다.
Node 설치 여부가 확실하지 않다면 명령 프롬프트(cmd)나 PowerShell을 열고 아래 명령어를 입력해 보세요.
node -v
또는
node --version
Node가 이미 설치되어 있다면 v8.17.0처럼 현재 설치된 버전 번호가 출력됩니다.
Node.js가 없다면?
Node가 설치되어 있지 않다면 NodeJS.org 공식 사이트에 접속하여 사용 중인 운영체제(Windows)에 맞는 설치 파일을 다운로드하세요. 다운로드가 완료되면 설치 프로그램을 실행하고 화면의 안내에 따라 진행하면 됩니다.
참고: Node.js를 설치하면 npm도 자동으로 함께 설치되므로 별도로 설치할 필요가 없습니다. 설치 후 npm -v 명령어로 npm 버전을 확인할 수 있습니다.
2단계: Gulp CLI(명령줄 유틸리티) 전역 설치
Gulp는 크게 두 가지 부분으로 구성됩니다.
- Gulp CLI: 컴퓨터에 전역(global)으로 한 번만 설치하는 명령줄 유틸리티
- 로컬 Gulp 패키지: 작업하는 각 프로젝트 폴더마다 개별적으로 설치하는 패키지
이러한 분리 구조는 Gulp v4부터 도입된 것으로, 덕분에 프로젝트마다 서로 다른 버전의 Gulp를 독립적으로 사용할 수 있습니다. 관련 내용은 Gulp 팀의 공식 Medium 아티클에서 더 자세히 확인할 수 있습니다.
Gulp CLI를 전역으로 설치하려면 명령줄에서 아래 명령어를 실행하세요.
npm install gulp-cli -g
여기서 -g 플래그는 npm이 해당 패키지를 전역 npm 디렉터리에 설치하도록 지시하는 옵션입니다. 이렇게 설치하면 어떤 디렉터리에서든 gulp 명령어를 바로 실행할 수 있습니다.
3단계: 로컬 프로젝트에 Gulp 설치
Gulp CLI를 전역으로 설치했다면, 이제 실제로 Gulp를 사용할 프로젝트 폴더에 로컬 패키지를 설치하면 됩니다.
먼저 터미널에서 프로젝트 디렉터리로 이동한 뒤, 아래 명령어를 실행합니다.
npm install gulp
설치한 Gulp를 package.json 파일의 개발 의존성(devDependencies)에 기록하려면 --save-dev 옵션을 추가하세요.
npm install gulp --save-dev
다음 단계: gulpfile.js 작성하기
로컬 Gulp 설치가 완료되면 프로젝트 루트에 gulpfile.js 파일을 생성하고, Sass/SCSS 컴파일, JavaScript 번들링 등 원하는 자동화 작업(task)을 정의하면 됩니다. Sass/SCSS와 JS 워크플로우를 위한 Gulp 설정 방법을 다룬 상세 튜토리얼도 함께 참고하시길 추천합니다.