Gulp이란?

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

웹 개발을 하려면, 많은 작업들을 해야 한다.

특히, 현재의 웹사이트에서는 PC뿐만 아니라 모바일 레이아웃도 준비해야 하며, 모바일의 빈약한 통신 속도에서도 웹사이트를 보다 빨리 표시할 있도록 하기 위해 다음 작업도 필요하다.

  • CSS 브라우저 호환, 통합, 압축
  • JavaScript 통합 및 압축
  • 이미지 무손실 압축

이런 작업들은 수동으로 하게 되면, 매우 시간이 걸리는 성가신 작업이다. 그런 번거로운 작업을 자동화하기 위해 만들어진 것이 ‘테스트 러너 도구(task runner tool)’ 이다.

테스크 러너 도구는 수많은 자동화 도구의 총칭이다. 여기에서는 그 중에서도 인기있는 ‘gulp’에 대해 설명하려고 한다.

Gulp이란?

Gulp은 HTML, CSS, JavaScript 코딩 분야(=프런트 엔드)에 특화된 태스크 러너 도구이다.

비슷한 도구가 여러 가지 있지만, Gulp은 그 중에서도 다음과 같은 특징이 있다.

  • Node.js에서 작동 (Windows 및 Mac에서 모두 사용할 수 있음)
  • 설정 파일이 JavaScript이므로 프런트 엔드의 개발자들이 다루기 쉽다.
  • 동시에 복수의 처리를 실행할 수 있기 때문에 (비동기 처리) 처리 속도가 빠르다.
  • 플러그인이 풍부하다.

처리 속도가 빠른 것도 강점이지만, Gulp는 무엇보다 플러그인이 풍부하여, 커뮤니티에 의한 활동이 활발해 매일 툴의 강화가 행해지고 있는 것이 강점이다.

gulp로 할 수 있는 일

gulp 플러그인을 활용하면 다음과 같은 것을 완전히 자동화할 수 있다.

CSS, JavaScript 등 미니파이(minify)

CSS나 JavaScript 등의 텍스트 파일은 개발 중에는 사람이 읽을 수 있는 형식이어야 한다. 그러나, 프로덕션 환경에 업로드하여 사용할 때는 브라우저를 해석 할 수 있으면 좋기 때문에 가능한 한 쓸데없는 부분(공백 등)을 제거해야 한다. 그렇게 하므로써 로드 시간과 전력 소비를 절약할 수 있다. Google도 추천하며 검색결과 순위에도 영향을 미친다고 한다.

Sass 및 LESS에서 CSS로 자동 컴파일

웹 개발에 있어서 CSS를 직접 작성하는 것이 아니라, Sass나 LESS 등의 CSS 프리프로세서(CSS 메타언어)를 사용해 작성하기도 한다. 그렇게 작성을 하게 되면 스타일을 간결하게 작성할 수 있어, CSS로 쓰는 것보다도 읽기 쉬워지기 때문이다. Sass나 LESS 등 으로 작성된 파일은 최종적으로 CSS에 컴파일에 사용된다. 그리고 CSS로 컴파일 하게 되면 CSS 접두사 자동 부여해 준다.

이미지 압축

일반적인 사이트에서는 이미지가 사이트의 데이터 양의 대부분을 차지한다. 따라서 가능한 한 이미지를 품질이 나빠지지 않게 즉, 무손실 압축 처리를 하는 것이 좋다. 또한 이미지와 관련된 메타데이터를 제거하여 파일 용량을 줄일 수 있다. 특히 PNG 이미지는 파일에 따라서는 70%이상 압축되는 경우도 있기 때문에, 실행을 하는 것이 좋다.

CSS 작성시 실시간 모니터링

gulp의 모니터 테스트(watch)를 만들면 파일을 실시간으로 변경을 해준다.

Gulp 설치 및 사용

사전 준비

Gulp는 Node.js에서 실행되는 프로그램이므로 사용하는 환경에 맞게 Node.js와 npm를 설치되어 있어야 한다. 여기서는 Node.js가 이미 설치되어 있다고 가정하고 설명을 하도록 하겠다.

만약 아직 Node.js가 설치되어 있지 않다면, 아래 페이지를 참고하여 설치를 먼저 하도록 한다.

Node.js | Node.js 사용 준비

프로젝트 폴더 만들기

Node.js가 설치되었다면, 프로젝트에 대한 폴더를 만들어 초기화한다. 여기에서는 프로젝트 폴더 이름을 “gulp-tutorial"로 지정한다. 그럼 다음 명령을 실행한다.

mkdir gulp-tutorial
cd gulp-tutorial
npm init
% mkdir gulp-tutorial
% cd gulp-tutorial
% npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (gulp-tutorial)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/user/develop/tutorial/nodejs-tutorial/gulp-tutorial/package.json:

{
  "name": "gulp-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

도중에 여러가지 설정을 물어보지만, 그대로 차례대로 Enter만 눌려도 된다.

gulp 설치

gulp를 설치하려면 Node.js의 npm이라는 패키지 관리 시스템을 사용한다.

gulp는 컴퓨터의 어느 곳에서나 사용할 수 있는 전역(global) 설치와, 지정된 디렉터리 아래에서만 사용할 수 있는 로컬(local) 설치가 있다. 이번에는 준비한 설정 파일에서 모두 수행한다.

전역 설치

먼저, gulp의 전역 설치를 해보도록 하도록 하겠다.

npm install gulp -g

위에 명령은 $npm i gulp -g와 같이 줄일 수 있다. 양쪽 모두 동일한 명령을 실행한다.

% npm install gulp -g
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated fsevents@1.2.13: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies

added 354 packages in 24s

12 packages are looking for funding
  run `npm fund` for details

gulp 설치 후에는 버전을 체크하여 설치가 완료가 되었는지 확인 한다.

% gulp --version
CLI version: 2.3.0
Local version: Unknown

로컬 설치

gulp의 로컬 설치를 하려면, 작업 디렉터리에서 명령을 실행해야 하므로, 작업 디렉터리으로 이동해야 한다.

여기서는 gulp-tutorial 이 디렉터리 안에 위치해 있으면 된다.

% pwd
/Users/user/develop/..생략../gulp-tutorial

그리고 아래 명령을 실행한다.

npm install gulp --save-dev
% npm install gulp --save-dev
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated fsevents@1.2.13: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies

added 354 packages, and audited 355 packages in 20s

12 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

설치가 되었다면, 버전을 확인해 보자. Local version이 표시되었다면 잘 설치되었다.

% gulp --version
CLI version: 2.3.0
Local version: 4.0.2

플러그인 설치

Gulp만으로는 아무것도 할 수 없으므로 계속해서 플러그인을 설치하도록 하겠다.

여기서는 CSS 미니파이(gulp-cssmin)와 이름을 바꾸는(gulp-rename) 플러그인을 설치하기 위해 명령을 실행한다.

npm install --save-dev gulp-cssmin gulp-rename
% npm install --save-dev gulp-cssmin gulp-rename
npm WARN deprecated gulp-util@2.2.20: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated uuid@1.4.2: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated graceful-fs@2.0.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js

added 70 packages, and audited 425 packages in 10s

15 packages are looking for funding
  run `npm fund` for details

12 vulnerabilities (1 low, 8 high, 3 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

이것으로 설치 프로세스가 완료되었다.

구성 파일 작성

그러면, Gulp에서 자동화하는 처리를 설정 파일에 작성해 보자. 방금 전에 만든 프로젝트의 최상단 디렉터리에서 gulpfile.js라는 파일을 만든다. 내용은 아래와 같다.

var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');

gulp.task('cssminify', async function () {
  gulp.src('style.css')
  .pipe(cssmin())
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest('.'));
});

Gulp의 태스크는 파이프라인처럼 위에서 아래로 흐르도록 작성하기에 무엇을 하는지에 대해 보면 바로 알 수 있을 것이다.

CSS 파일 만들기

다음으로는 처리 대상이 되는 CSS 파일을 작성한다. 파일명운 style.css로서 아래와 같은 간단한 CSS를 작성한다.

.content {
  width: 100%;
  height: 200px;
  padding: 5px 10px 5px 10px;
}

Gulp 작업 수행

CSS 파일을 작성하였다면, Gulp를 호출하여 작업을 실행해 본다.

gulpfile.js에서 테스크명을 cssminify로 하였기에 아래와 같이 명령을 실행하며 된다.

gulp cssminify
% gulp cssminify
[00:24:39] Using gulpfile ~/develop/..생략../gulp-tutorial/gulpfile.js
[00:24:39] Starting 'cssminify'...
[00:24:39] Finished 'cssminify' after 4.75 ms

프로젝트 디렉터리를 확인해 보면, 미니파이 처리된 style.min.css파일이 생성되고 되고, 파일 내용을 확인해 보면 공백이 없이 압축된 것을 확인할 수 있다.

% ls -al
total 376
drwxr-xr-x    8 user  staff     256  5 11 00:24 .
drwxr-xr-x    5 user  staff     160  5 10 23:51 ..
-rw-r--r--    1 user  staff     251  5 11 00:24 gulpfile.js
drwxr-xr-x  334 user  staff   10688  5 11 00:10 node_modules
-rw-r--r--    1 user  staff  175378  5 11 00:10 package-lock.json
-rw-r--r--    1 user  staff     316  5 11 00:10 package.json
-rw-r--r--    1 user  staff      75  5 11 00:19 style.css
-rw-r--r--    1 user  staff      50  5 11 00:19 style.min.css
% cat style.min.css
.content{width:100%;height:200px;padding:5px 10px}%

자동으로 실행되는 테스트 만들기

매번 수동으로 명령을 실행하는 것은 번거롭기 때문에 CSS 파일의 변경 사항을 모니터링하고 자동으로 실행되는 작업을 만든다.

위에서 작성한 gulpfile.js 파일에 다음 설정을 추가한다.

gulp.task('watch', function() {
    gulp.watch('style.css', gulp.series('cssminify'));
});

'watch' 태스크는 지정된 파일을 모니터하고 변경이 있을 때 지정된 태스크를 실행한다.

구성 파일을 저장한 후 다음 명령을 입력하여 태스크를 실행한다.

gulp watch
 % gulp watch
[00:35:00] Using gulpfile ~/develop/..생략../gulp-tutorial/gulpfile.js
[00:35:00] Starting 'watch'...
[00:35:59] Starting 'cssminify'...
[00:35:59] Finished 'cssminify' after 18 ms
[00:36:06] Starting 'cssminify'...
[00:36:06] Finished 'cssminify' after 9.28 ms

그러면, 파일 모니터링이 시작되면서, CSS 파일을 변경이 될 때마다, CSS 파일을 저장하는 동시에 작업이 실행되고 “style.min.css” 파일이 업데이트 된다.

이와 같이 Gulp에서는 다양한 처리를 자동화할 수 있다.

요약

Gulp의 편리함을 간단히 알아 보았다. Gulp에서는 이번에 다룬 CSS의 미니파이 처리 이외에도, 다양한 일을 할 수 있다. Gulp에는 수많은 기능이 플러그인으로 공개되어 있으므로 개발 작업과 관련된 플러그인을 찾아 자동화해 보길 바란다. 이렇게 매일 약간의 시간을 절약할 수 있으면, 멀리 보면 상당한 시간을 절약할 수 있다. Gulp를 사용하여 웹 개발 작업을 가속화해 보아라. Gulp를 사용하여 어떤 작업을 자동화하고 싶은가?




최종 수정 : 2024-03-09