[걸프(Gulp)] 1. 소개 및 설치

제가 혼자서만 공부하다보니 gulp를 실무서 어떻게 사용하는지 정확히 모릅니다. gulp를 사용하시는 분이 혹시 계시다면 꼭 저의 잘못된 점은 지적해 주셨으면 합니다. 무한 태클 환영합니다!

 

 

Gulp(걸프)란 자동화 시스템 입니다.

컴파일 이란 부분도 이 자동화 시스템에 포함되어 있죠.

간단한 예로 Sass(사스)가 그렇습니다. scss 파일을 css 파일로 변환 시켜주는 부분을 컴파일 한다고 합니다.

 

컴파일 이란 소스 코드를 실행할 수 있는 실행 파일로 변환 하는 과정이고,

빌드 란 이 컴파일을 포함하는 더 큰 개념으로써, 소스의 컴파일을 포함해 어플리 케이션을 사용할 수 있는 형태로 만들어 주는 과정을 뜻합니다.

 

Sass 뿐만 아니라 스크립트 오류를 검사하거나, html 태그를 include하거나, js또는 css를 압축할때 사용하기도 합니다.

특히 html의 include는 제가 앞으로 업무를 할 때 꼭 필요한 부분이라 더더욱...

 

이 걸프를 이용해서 해볼건 이것저것 많겠지만 제가 해본것들 그리고 나중에 알게되는 것들을 포스팅하겠습니다.

 

일단 이 자동화 시스템을 사용하기에는 한가지 단계를 꼭 거쳐야 합니다.

바로 Node js를 설치해야 하죠.

여기서 Gulp를 사용하기 위해서 Node js를 꼭 알아야 하는가?

그렇지 않습니다. 저도 잘 몰라요 ㅋ 하지만 꼭 공부해 보고싶은 부분입니다.

잘 모르는데도 사용할 수 있는가?

네, 저는 사용할 수 있다고 생각합니다. 모르면 될때까지 해보는겁니다.

 

그리고 이 블로그는 어떤것이든 무엇이 됬든 1도 몰랐다면 거기에 맞춰서 시작하는 블로그 입니다.

 

 

 

 

 

 

 

 

1. Node js 설치

https://nodejs.org/ko/ 이 주소에서 설치합니다.

설치가 두가지가 있는데 LTS 안정화 버전을 설치하시면 괜찮을꺼 같습니다. 이것에 관한 책도 최근에 출판했습니다.

윈도우 라면은 설치 과정은 생략하겠습니다. 그냥 Next만 눌러주시면 됩니다.

하지만. Mac을 사용하시는 분은 아래 링크를 꼭 클릭해서 설치 방법을 따라하시길 바랍니다. (저도 Mac을 가지고 있어서 아래 설치 방법을 그대로 따라 했습니다.)

Mac(맥)에서 Node js를 설치하는 최고의 방법

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

/* 160922 추가 */

제가 맥에서  https://nodejs.org/ko/ 이 주소로 최신 버전을 다운받아서 설치해 봤는데

업데이트 무난하게 잘 진행되었습니다.

음.. 그냥 이미 깔려있어도 신경쓰지 마시고 그냥 다운 받으셔도 될꺼 같아요.

Node js 버전 확인 명령어는

node --version

입니다. 이건 맥이나 윈도우나 똑같습니다.

 

 

 

 

 

 

 

2. 설치가 완료 되셨으면

윈도우는 윈도우키 + R -> cmd 입력 후 엔터,

맥은 컨트롤 + 스페이스바 -> terminal 입력 후 엔터

해서 명령 프롬프트 창 또는 터미널 창을 열도록 합니다.

 

 

 

 

 

 

 

 

 

3. 다음과 같이 입력해 봅니다.

npm install -g gulp

이렇게 입력하시면 gulp 를 설치합니다.

-g 라는건 global옵션입니다. Git 명령어를 포스팅 할때 --global 옵션을 붙여서 사용했던 적이 있습니다. 그것처럼 명령프롬프트 또는 터미널 어디에선 gulp 명령어를 사용할 수 있게 합니다.

또 npm 이란걸 왜 앞에 붙이느냐 npm 은 Node Packaged Module 의 약자로 npm 이라고 합니다.

내가 사용하고자 하는 필요한 패키지를 찾아서 다운로드 받으면 사용할 수 있도록 되어 있습니다.

아무튼 아래의 그림과 같이 또는 비슷하게 뭔가 촤르르르륵 지나갔다면 오케이 입니다. (Node js를 설치하지 않고 npm 명령어는 사용하실 수 없습니다!)

 

 

 

 

 

 

 

 

4. 그리고 node 에서 관리하는 packge.js를 만들기 위해 저희는 명령어 하나를 더 사용할 껀데,

명령어를 사용 하기 전에 Gulp를 이용해서 작업해야 할 폴더로 이동한다음에 사용하세요.

저는 D드라이브에 gulpSetting폴더 하나를 생성해 두고 사용해 보려 합니다.

여기서 붉은색으로 및줄 친 부분이 경로 입니다. 드라이브를 이동할 땐 드라이브명: 만 입력하면 되지만 그 위치에서 폴더를 바꿀 땐 cd 를 입력합니다.

는... 윈도우 기준이고...

맥이라면 보통 바탕화면 에다가 만드실 꺼라 생각됩니다.

맥이라면

cd ~/Desktop

mkdir 폴더이름

cd ./폴더이름

 

이렇게 하시면 바탕화면에 폴더가 생성이 되어 있습니다.

그리고 맥이든 윈도우든

폴더야 오른쪽 클릭으로 쉽게 원하는 경로에 만들 수 있지만, 중요한건 폴더를 어떻게 만드느냐가 아니예요.

이렇게 명령어로 반드시 해당되는 폴더로 이동시켜 줍시다. 꼭.......

 

 

 

 

 

 

 

 

 

5. 다음의 명령어를 입력합니다.

npm init

이 명령을 사용하면 name 입력하라고 뜹니다. 당황하지 마세요.

그리고 차분히 적당한 이름을 입력해 줍니다.

하지만! 폴더와 동일한 이름이거나 그냥 엔터를 눌러주면

Sorry, name can no longer contain capital letters.

라고 뜹니다. 그래서 적당한 이름을 입력했습니다. 저는 test 라고... ㅎㅎ

 

 

 

 

 

 

 

 

6. 그리고 엔터를 대략 9번 정도 더 눌러 줍니다. ㅋㅋㅋㅋㅋㅋㅋ

 

 

 

 

 

 

 

 

7. 그러면 D드라이브의 gulpSetting 폴더에 뭐시 생성이 됐는지 확인해 보도록 합시다.

그러면 package.json 이라는 파일이 있을껍니다.

(이 부분은 제가 혼자서만 공부하다보니 gulp를 실무서 어떻게 npm init 하는지 정확히 모릅니다. gulp를 사용하시는 분이 혹시 계시다면 꼭 저의 잘못된 점은 지적해 주셨으면 합니다. 무한 태클 환영합니다!)

 

 

 

 

 

 

 

 

8. 그리고 실제로 개발 작업을 할 프로젝트 폴더에 Gulp를 다시한번 설치해야 한다고 합니다. 위에 글로벌 옵션(-g)로 전역에 설치했는데 왜 다시 설치를 하느냐 하면 이유는 인터넷이 되지 않는 환경에서는 전역에 설치한 Gulp를 복사해서 설치할 수 있기 때문이라고 합니다. 그래서 전에 전역으로 설치를 해줬던 거라고 합니다.

다음의 명령어는 로컬에서 설치하는 명령어 입니다.

npm install --save-dev gulp

여기서 --save-dev 옵션을 주었습니다. 이 옵션을 사용하면 어떤 모듈들을 앱에서 쓰는지 바로 알 수 있다고 합니다.

--save 옵션과 --save-dev 옵션의 차이

http://cafe.naver.com/hacosa/162218

 

 

 

 

 

 

 

 

9. 다시 gulpSetting 폴더를 확인해 보도록 하겠습니다.

또 뭐 폴더가 생겼네요! 이건 위에서 설명했듯이 인터넷이 끊겼을 때를 대비해서 설치한 gulp 모듈 인거같습니다.

굳이 열어서 볼 필요는 없을꺼 같습니다. 전역에 설치했던 gulp 모듈에 관한 파일들이 그대로 이 폴더에 저장되어 있습니다.

 

 

 

 

 

 

 

 

10. 그렇다면 npm init 로 생성한 packge.json을 열어보도록 하겠습니다. 적당한 텍스트 편집기로 열어보겠습니다.

제 기준으로 11번째 라인을 보시면 Gulp를 --save-dev로 설치했기 때문에 개발 디펜던시안에 있다고 합니다.

 

 

 

 

 

 

 

 

11. 그럼 이제 터미널 또는 명령프롬프트창에서 gulp를 입력해 보도록 하겠습니다.

그러면 다음과 같은 문구를 출력합니다.

No gulpfile found

gulpfile 이 없다고 출력됩니다. gulp를 쓰려면 gulpfile.js를 만들어 줘야 하나봅니다.

 

 

 

 

 

 

12. 저는 gulpSetting 폴더의 바로 아래에 이 gulpfile.js를 만들었습니다.

 

 

 

 

 

 

 

 

13. 그리고 이 gulpfile.js 에 다음과 같이 입력했습니다.

아래와 같이 입력했다면 저장합니다.

 

var gulp = require('gulp');
 
gulp.task('default', function(){
    console.log('테스트지롱');
});

 

 

 

 

 

 

 

 

14. 그러면 터미널 또는 명령프롬프트 창에서 gulp 라고 입력해 보도록 합니다.

그러면 13번에서 작성했던 코드중 4번라인인

테스트지롱

이 출력되는걸 확인하실 수 있습니다.

 

 

 

 

 

 

 

 

15. 또는 gulp default 라고 입력해도 똑같이 출력이 됩니다.

그럼 뒤에 default 는 13번에서 작성했던 코드 중 3번 코드를 잘 보시면 default 라고 적혀 있는걸 확인하실 수 있을꺼예요.

이걸 아주 쉽게 제이쿼리를 예로 들어서 설명해 보겠습니다.

$selector.on('click', function(){

// 클릭하면 일어날 일들

});

 

감이 오실꺼에요.

click 하면 일어날 일들!

이네요?

 

그냥 이걸 default 를 입력하면 다음과 같이 일어난다고 심플하게 생각하시면.... 됩...

자세한 설명

http://programmingsummaries.tistory.com/377

 

 

 

 

소개 및 설치는 여기까지구요

다음 포스팅은 html include 에 대해 작성해 보겠습니다.