Gulp 설치하고 시작하기

 

Gulp 설치하기

gulp를 사용하기 위해서는 node.js 를 다운로드 받으셔야 합니다.

window + R 키를 함께 눌러 cmd를 입력한 뒤 cmd 창에서 아래와 같이 노드와 npm 버전을 확인하는 명령어를 입력 합니다.

node --v 

npm --v

해당 명령어로 node와 npm이 제대로 설치되었는지 확인합니다. 해당 명령어는 node와 npm의 버전을 확인하는 명령어로 제대로 설치가 되었다면 해당 명령어 입력 후 엔터를 누르시면 파일의 버전이 나옵니다.

 

[gulp 전역설치] 

어디에서나 gulp명령어를 사용할 수 있도록 전역에 설치합니다.

npm install gulp -g

gulp -v 

버전이 제대로 설치되었는지 확인한다. 

 

[gulp local 설치]

전역에 설치했더라도 해당 local(폴더)에 모듈을 설치하기 위해서 명령어를 입력합니다.

npm install gulp --save-dev

-dev를 붙이는 이유는 여기서 모듈은 개발할 때에만 필요하고 배포할 때에는 필요하지 않기 때문입니다.

local에 설치하면 node_modules 폴더와 package-lock.json 파일이 생성됩니다. 

 

vs code 터미널에서 명령어 사용하기

 

에디터의 터미널에서 명령어를 입력할 때 'npm'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 라고 뜨게 됩니다. 이 때의 해결 방법입니다. 

 

"내pc (바탕화면 우클릭) - 속성 - 고급 - 환경변수 - 시스템 변수 - path - 찾아보기" 에서

C:\User\{사용자이름}\AppData\Roaming\npm

경로를 찾아서 추가 시켜주시면 에디터에서도 명령어를 사용할 수 있게 됩니다.

 

npm init

명령어를 입력하신 뒤 나오는 모든 창에 엔터를 눌러 넘어가면 마지막에 package.json 파일이 생성됩니다.

 

참고페이지 https://webclub.tistory.com/467

 

gulpfile.js 파일을 만들어서 gulp 실행시켜보기

gulp를 실행시켜줄 gulpfile.js 파일을 만들어줍니다. test결과 gulpfile의 파일명을 바꾸면 안됩니다. gulp.js로 테스트를 해보았는데 안되네요.

*gulpfile.js 파일의 위치는 프로젝트 폴더의 가장 상단입니다.

//gulp module 호출
var gulp = require('gulp');
 
//task()를 사용해서 gulp 호출 test 해보기
gulp.task('start', funtion(){
    console.log('☆☆☆☆☆console test☆☆☆☆☆')
});

gulp 지정한이름 을 명령어로 입력해서 console test 문구가 뜨는지 확인합니다.

위와 같은 경우 gulp start 로 명령어를 입력하면 되겠습니다. 

 

저 같은 경우 'Did you forget to signal async completion?' 이라는 에러가 떴는데 이는 'async'를 추가적으로 넣어서 해결할 수 있었습니다.

gulp.task('start', async funtion(){ 
    console.log('☆☆☆☆☆console test☆☆☆☆☆')
});

gulp 의 폴더 구성

src와 dist 폴더를 만들어 줍니다. 

src 폴더는 css, scss 그리고 이미지 등과 같은 요소들이 들어갈 공간이고 

dist 폴더는 gulp로 빌드된 파일로 최적화 되게 됩니다.

 

 

Gulp File Include 하기

Gulp에는 많은 기능들이 있지만 저는 file include 기능 때문에 gulp를 꼭 사용해보고싶어서 공부하는 중입니다. 그럼 file includ를 공부해보겠습니다.