728x90

이 버전 gulp는 구버전(<=3.9.1)을 다루고 있다.

신버전과 구버전의 사용법은 많이 다르다.

현재 대부분의 레거시와 인터넷 사용법은 구버전을 다루고 있다.

그래서 일단 구버전으로 강의를 먼저 시작하고 추후에 신버전 사용법을 알려드리도록 하겠다.


문서 - https://libraries.io/npm/gulp/3.9.1



꿀꺽


BuildSystem이라는것은 컴파일을 사용하는 언어에서 채택하는 방식이다.

그래서 C와 C++의 make,cmake나 java의 ant,maven,gradle이 존재한다.


그러나 보통 인터프리터 언어는 빌드가 필요하지 않으므로 BuildSystem 대신에 package manager라는걸 사용한다.

예를들자면 파이썬의 pip나 자바스크립트의 npm,bower,yarn등이 있다.


근데 자바스크립트에 빌드시스템?? 도대체 왜 필요한가 묻는다면 요즘엔 자바스크립트도 컴파일 하기 때문이다.

즉 자바스크립트의 위상은 사실상 브라우저에서 쓰는 기계어 수준의 위상을 가지고 있다.

그리고 자바스크립트를 사용하기 쉽게 하기 위해서 여러가지 테크닉을 사용하고 있다.

가령 여러분이 타입스크립트나 커피스크립트를 쓴다면 자바스크립트로 번역해야한다.

그럼 여러분이 만약 자바스크립트라면?? 그것도 버전별로 컴파일 해줘야한다.


그냥 자바스크립트만 쓴다고 안전한가? html은 만약 pug나 ejs를 쓴다면?

css는 sass나 scss를 쓰고 있다면?? 만약 vue나 react등을 사용하고 있다면.

아니면 분할해서 웹 코딩을 하고있다면??


이러한 일은 비일비재하다. 그렇기 때문에 이런 컴파일을 해소해주기 위한 빌드시스템이 필요하다.

그래서 이번에 소개할 것은 gulp이다.


gulp는 정말 순수한 의미로의 build system이다.

뭔소린고 하면 maven이나 gradle의 경우 build system + package manager이다.

그러나 gulp는 package manager가 될 순 없다. 그래서 항상 npm이나 yarn등의 package manager도 같이 사용해야만 한다.


여러분이 gulp를 쓰기전에 궁금해 할게 있다.


요즘 대세는 webpack이 대세인데 gulp를 왜 쓰나요?


거기에 대한 필자의 대답은


나도 쓰고싶어서 쓰는거 아냐, 레거시 코드가 gulp로 되어있어

그래서 gulp를 쓰고 있다.

사실 요즘 어떠한 칼럼을 봐도 gulp보다는 webpack이 낫다고 말하는 사람이 많다.

그래도 여러분이 레거시 코드를 만질일이 있을테니 필요한 사람만 보면 될 것이다.


쉽게 말해서 재미로 보거나 필요한 사람만 보라는 뜻이다.


그러나 gulp만의 장점도 있다.


gulp는 js진영에서 가장 좋은 task runner이다.

애당초 번들러로 나온 webpack과 task runner로 나온 gulp는 타겟이 좀 다르긴 하다.

예를들어 프로젝트가 web특화가 아니라면 webpack보다는 gulp가 더 낫다.

그리고 반복작업은 gulp가 더 유리하고 코드도 더 보기쉽다는 장점이 있다.


이제 gulp프로젝트를 만들어 봅시다.



npm install gulp -g


먼저 전역으로 gulp를 깔아준다.

그래야 gulp명령어를 쓸 수 있기 때문이다.



npm init


이미 프로젝트가 존재한다면 여러분만의 프로젝트를 쓰면된다.

그게 아니라면 npm init으로 만들어준다.



touch gulpfile.js


가장 중요한 파일은 gulpfile.js를 만들어준다.

이름을 위와같이 지으면 gulp가 자동으로 이 파일을 인식해서 읽게된다.

이는 npm이 package.json을 자동으로 인식해서 읽는것과 동등하다.



npm install gulp@3.9.1 --save-dev


그리고 gulp를 로컬로도 설치한다.

개발할때만 필요하므로 dev플래그를 끼어서 설치해준다.

로컬로 설치하는 이유는 gulpfuile으 gulp를 쓰기 위해서다.



파일의 구조는 위와같다.

든든하게 하나의 package manager와 하나의 build system을 가지고 있다.

이제 엄청 간단한 예제 프로그램을 사용해보도록 하자.


const gulp = require('gulp');

gulp.task('hello', () => {
console.log('hello');
});

gulp.task('default', () => {
console.log('default');
});

아주 간단한 예제이고 사실 이 예제는 별 의미가 없지만 구조를 아는데는 도움이 될 것이다.


gulp.task('<골>',()=>{

<레시피>

});


한개의 작업 단위를 "태스크"라고한다.

그리고 그 태스크를 "골"이라고도 부른다.

그리고 실행되는 내용을 "레시피"라고 부른다.


이제 gulp를 실행해보자.



gulp <골 이름>


여러분은 default라는 골을 만들었다.

그러므로 실행할때 위 처럼 골의 이름을 붙혀주면 실행된다.

아래에 빨간경고가 뜨지만 신경쓸 필요없다.

여기서 특별히도 defualt로 정한 골은 특별하다.

바로 아무 명령어 없이 gulp만으로 실행된다.



gulp


그냥 명령어만 실행하면 default가 실행된다.


이까지 보면 별로 특이할게 없다.

그러나 gulp는 빌드시스템으로 태스크 체이닝이 된다.

예를 들면 아래와 같은 코드를 보도록 하자.


const gulp = require('gulp');

gulp.task('hello', function () {
console.log('hello');
});

gulp.task('default', ['hello'], function () {
console.log('default');
});

이를 유추할 수 있겠는가?

make에 익숙하다면 이를 유추할 수 있을 것이다.


default는 hello에 의존된다.

이를 선행조건이라고부르며 다른말로는 의존성이라고 부른다.

즉 default가 실행되려면 hello가 실행되야만 한다는 것이다.

그럼 실행해보자.



두 태스크가 순서대로 실행되는걸 알 수 있다.

골을 여러개 넣어도 상관없다. 그 경우 배열에 넣은 순서대로 차례대로 작동하게 된다.


※야! 예제가 안되 ㅠㅠ

예제 따라하는데 안되는 사람이 있다.

버전을 잘확인해봐라. 4버전 이상은 3버전과 호환이 안된다.

대부분 레거시는 3버전으로 되어있다.

추후에 올릴내용에 4버전에서 어떻게 바뀌었는지 올릴것이지만 지금은 아니다.


+ Recent posts