GULP 설치하기

GULP 설치하기

자동화 툴 중에 하나인 GULP를 설치해보려고 합니다.

아래 출처 상의 회복맨님의 블로그에 자세히 나와있지만 저도 한번 복기할 겸 해서 작성해보려고 합니다.

1. 우선 NODE를 설치합니다.

https://nodejs.org/ko/

Node 버전은 TLS로 사용하는 것을 추천해드립니다. Beta 버전으로 사용 했을 시에 가끔 오류가 생기더군요.

http://hochulshin.com/node-install-osx/

Mac은 또 다른 방법으로 설치해야 합니다.

2. 커맨드라인 입력

npm install -g gulp

여기서 -g 는 global 옵션입니다.  

NPM(Node Package Module)으로 설치하는 것입니다.

3. package.js를 만들기

gulp setting만 전문적으로 하기위한 폴더를 생성해봅시다.

현재 폴더에 생성할 것이라고 하면.. 
 
// gulpSetting이라는 폴더를 만듭니다.
mkdir gulpSetting
 
// 현재 위치에서 gulpSetting 폴더로 이동
cd gulpSetting
 

4. npm init

npm init을 해당 gulpSetting에서 명령해줍니다. 

엔터로 주우욱 넘기다가 yes만 한번 해주면 됩니다.

5. gulpSetting 폴더 확인

확인해보면 package.json 이라는 파일이 생성되어 있을 겁니다.

6. 실제로 개발 작업할 프로젝트 폴더에 Gulp 다시 설치

실제로 개발 작업 하는 폴더에 Gulp 다시 설치하는 이유는 -g로 설치했음에도 불구하고 인터넷이 되지 않는 환경에서 전역에 설치한 Gulp를 복사해서 설치할 수 있기 때문이라고 합니다.

로컬에서 설치하는 명령어는 다음과 같습니다.

npm install --save-dev gulp

여기서 -dev 옵션을 주는 이유는 모듈들을 앱에서 어떤 것을 쓰는지 바로 알 수 있다고 합니다.

7. 다시 gulpSetting 폴더 확인

확인 해보면 node_modules라는 폴더가 생기고 그 안에 전역에 설치했던 gulp 모듈에 관한 파일이 그대로 폴더에 저장됩니다.

8. npm init으로 생성한 package.json을 오픈

11 번째 라인을 보시면 gulp 를 -dev로 설치해서 개발 디펜던시 안에 있다고 표시되어 있습니다.

9. 명령프롬프트 창에서 gulp 입력

다음과 같은 문구가 나옵니다. 

No gulpfile found

gulp를 쓰기위해서 gulpfile.js를 만들어 줘야합니다.

var gulp = require('gulp');
 
gulp.task('default', function(){
    console.log('Test');
});

해당 내용을 입력한 뒤에 gulpfile.js를 저장합니다.

10. 그리고 나서 명령프롬프트 창에서 gulp 입력

하면 테스트라고 쓴 conosole.log가 찍힙니다.

gulp default라고 입력해도 됩니다.

출처 : http://recoveryman.tistory.com/285