gulp

gulp

gulp는 node.js 기반의 task runner, 자바스크립트 자동화 빌드 시스템입니다.
자바스크립트의 코드 결과를 한 번에 받는 방식이 아닌 Stream기반의 방식으로 이벤트마다 전달받는 방식을 이용합니다.
Stream을 기반으로 하고 있기 때문에 작업 속도가 빠릅니다.
gulp 안에는 task들이 존재하는데, 이 task들이 pipe로 연결되어 병렬 수행을 합니다. (각 task에서 작업 수행.)

install gulp

gulp를 셋팅하기 전에는 기본적으로 node와 npm이 설치가 되어 있어야 한다.

// Install the gulp command line utility
npm install --global gulp-cli

// Install the gulp package in your devDependencies
npm install --save-dev gulp

// Verify your gulp versions
gulp --version

출처: [https://gulpjs.com/docs/en/getting-started/quick-start/]

gulpfile

gulpfile 은 gulp에서 어떤 작업을 할지 정의해줍니다.
해당 gulpfile에서 각 task에서 자바스크립트 경량화, 난독화가 가능합니다.
css, html 도 경량화가 가능합니다.

BrowserSync

로컬에서 프론트 작업을 할 때, 코드를 수정 시에, 웹서버에 자동 빌드 후, 다시 접속되는 방식을 말하는데,
gulp를 사용하면, 이를 쉽게 자동화할 수 있습니다.
gulp.watch 기능을 사용하여, 변경이 감지되었을 때마다, 브라우저를 리프레쉬할 수 있습니다.

gulp-uglify-es

gulp 환경에서 자바스크립트를 경량화시키는 작업 중에 gulp-uglify를 써서 한다.

경량화 작업에는 gulp-minify 도 있는데 uglify 를 쓰면 (경량 + 난독)을 해줍니다.
근데 gulp-uglify에 문제점이 있다. 기본적으로 gulp는 es5환경에서 돌아감으로 babel과 같이 사용하여
es6환경에서도 돌아 갈 수 있도록 구축한다.
gulp-uglify를 사용하면 자바스크립트를 한 곳으로 경량화 시키는 작업을 하는데 gulp-uglify는 es5까지
지원을 함으로 es6용어를 사용할 경우 에러가 나는 것을 확인한다.
그래서 gulp-uglify 대신 gulp-uglify-es 를 사용하면 es6지원이 가능하다. 기존의 gulp-uglify 대신
gulp-uglify-es를 import 받아 사용 할 수 있다.

//import uglify from 'gulp-uglify';

import uglify from 'gulp-uglify-es'; 

사용방법은 다르지 않다. 똑같이 import 하면 바로 사용 가능하다.

간단한 gulp를 이용한 테스트

아래 깃허브 주소로 들어가여 간단한 gulp를 이용한 테스트를 확인할 수 있습니다.
[https://github.com/hojae-lee/gulp_study]

경험

gulp를 이용하여 개발하게 될 시에 watch와 BrowserSync 기능을 사용하여, 개발의 편의성과 속도가 올라가는 것을
느낄 수 있었습니다.
예를 들어, 현 시스템이 구축되지 않을 시에는 코드 수정 => 빌드 => 빌드된 소스 로드 => 화면 새로고침인데,
현 시스템을 구축하고 나서는 코드 수정 => 자동화 빌드, 화면 자동 새로고침 이런 식으로 프로세스가
구축되어, 개발자의 리소스를 줄이는데 매우 도움이 되고 있습니다. (코드 수정만 하면 끝!!)