Gulp설치 및 기본설정

들어가며

gulp는 프론트엔드 개발도구로 node.js를 기반의 task runner이다. 

작업을 하다보면 반복적이고 귀찮은 작업들이 있기마련인데 gulp를 통해 프론트엔드 빌드에 필요한 작업들을 쉽게 처리할 수 있다.

필자는 windows 사용자이므로 windows를 기준으로 설명하겠다.

필요한 프로그램

https://nodejs.ort/en/   으로 접속하여 node.js를 설치한다.

window키 + R  을 눌러서 command prompt 창을 실행시킨다.

node -v  npm -v 을 입력해서 각각 버전정보가 나오면 설치가 잘된 것이다.

gulp / bower 설치하기

command prompt에서

npm install -g gulp bower

위 명령어를 치고 작업할 프로젝트 폴더로 이동한다. 그 후 package.json파일을 셋팅한다.

npm init

이름, 버전, 설명, entry point 등등의 정보를 적어야하는데 필자는 그냥 엔터치고 생략했다.

작성이 완료되면 package.json 파일이 생성된다.

npm install --save-dev gulp

위 명령어로 gulp를 로컬에 설치한다. 설치 후 package.json을 보면 devDependencies에 gulp가 추가된 걸 확인할 수 있다.

아래 이미지는 package.json으로 devDependencies가 추가된 모습

--save-dev는 개발환경에서 사용되는 패키지들을 package.json파일목록에 추가해준다.

gulp를 local에 설치하고 난 후의 package.json

gulpfile.js / task 만들기

프로젝트폴더안에 gulpfile.js를 만든다.

이 파일안에 필요한 작업들. 즉, task들을 나열할 것이다.

var gulp = require('gulp');
 
gulp.task('hello', function () {
    return console.log('Hello World!');
});

node.js의 require로 gulp모듈을 가져와서 gulp의 task중 hello task를 실행시키는 것이다.

require은 다른 모듈을 불러올 때 사용한다.

hello라는 이름의 task를 만들고 그 안에 필요한 작업내용을 넣는다.

위 코드를 다 적고 command prompt창에서 

gulp hello

위 명령어를 실행하면

command prompt 창에서 hello task를 실행시킨 모습.

짜잔~ 여기까지 했으면 반은 한거다. 시작이 반이니.까.

이제 가만히만 있으면 완성이다. 가만히만 있으면 반은 가니까.