gulp.js 를 시작하기 위한 단계별 예제들과 설명
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
step01_hello_world
step02_default_task
step03_series
step04_uglify
step05_watch
step06_concat
step07_css_minify
step08_browser_sync
step09_browserify
step10_sourcemaps
step11_incremental_build
step12_plumber
step13_run_sequence
step14_react
step15_watchify
step16_select_task
step17_webpack
step18_sass
.gitignore
LICENSE
README.md
gulp01.png
gulp02.png
gulp03.png

README.md

gulp 시작하기

gulp.js을 시작하기 위해 필요한 가장 기본적인 사용 방법들을 정리했습니다. gulp

gulp 개념

gulp 는 node.js 기반의 task runner 입니다. 반복적인 귀찮은 작업들이나 프론트엔드 빌드에 필요한 작업들을 gulp 통해 쉽게 처리해줄 수 있습니다.

프론트엔드에서 반복적으로 하는 작업들

Gulp 는 스스로를 Stream 기반의 Build System 이라고 소개하고 있습니다.

요청 후 한번에 결과를 받는 것이 아니라 이벤트로 중간중간 전달받는 방식을 stream이라고 하는데, 이 stream 을 기반으로 하고 있기 때문에 가장 node.js 의 강점을 잘 살리고 있고 실제로 작업 속도도 비교적 더 빠른 것으로 알려져 있습니다.

gulp의 특징

gulp 의 task 는 pipe 로 연결되는데, 작업 대상 파일들이 pipe 를 따라 흘러가며(stream) 병렬로 동시에 여러 task를 수행하게 됩니다. gulp 라는 이름과 빨대가 꽂힌 컵모양의 심볼이 gulp 의 특징을 잘 반영하고 있다고 볼 수 있습니다.

gulp 설치하기

gulp 를 사용하기에 앞서 node.js 와 npm 이 먼저 미리 설치되어 있어야 합니다. node.js 와 npm 이 설치되었다면, 먼저 아래와 같이 package.json 파일을 생성해줍니다.

$ npm init

package.json 파일이 생성되었다면, 아래와 같이 gulp 를 global 과 local 모두 설치해줍니다.

$ npm install --global gulp-cli
$ npm install --save-dev gulp

--save-dev 옵션으로 설치해주는 이유는, 대부분 gulp 가 production 이 아닌 개발 과정에서만 필요하기 때문에, NODE_ENV 의 값이 production 인 경우 gulp가 설치되지 않도록 하기 위해서 입니다.

이제 이어서 gulp의 설정 파일인 gulpfile.js 을 step1부터 차근차근 따라가며 만들어가보도록 하겠습니다.

gulp 한 단계씩 따라해보기

단계별로 gulpfile.js 과 약간의 더미 파일들을 구성해두었습니다. 각 단계에 대한 설명 혹은 주석을 참고해서 직접 실행도 해보고 수정도 해보면 gulp 사용법을 익히는데 도움이 될 것입니다.

각 단계들을 바로 실행해보고 싶다면, 먼저 gulp-step-by-step 저장소를 아래와 같이 clone 합니다.

$ git clone https://github.com/eu81273/gulp-step-by-step.git

clone 받은 저장소의 원하는 예제가 위치한 폴더로 이동한 후, package.json 파일에 설정된 디펜던시들을 설치합니다.

$ cd gulp-step-by-step
$ cd step01_hello_world
$ npm install

디펜던시 설치가 완료된 후 각 예제의 설명을 따라 gulp 를 실행하면 예제의 결과를 확인해 볼 수 있습니다. (아래의 예는 step 01 을 실행하는 예입니다.)

$ gulp hello

Gulp 를 활용하는데 도움이 되는 링크들