Gulp으로 CSS 벤더 프리픽스 자동화하기

예제와 함께 보는 입문자용 짧은 튜토리얼

Gulp는 JavaScript로 돌아가는 프론트엔드 툴킷입니다. Gulp를 알기 전에는 CSS 벤더 프리픽스를 직접 하나씩 적거나, 온라인 오토 프리픽서 사이트에 CSS를 잔뜩 붙여 넣어 결과를 받아오곤 했습니다. 그런 방식도 가능은 하지만, 이 짧은 튜토리얼을 보고 나면 다시는 그렇게 하고 싶지 않으실 겁니다.

시작하기

Gulp으로 무엇을 할 수 있나요?

• 스프라이트 이미지 생성
• CSS 미디어 쿼리 통합
• JavaScript와 CSS 파일의 minify·beautify
• HTML 파일 압축
• Sass, Less, Stylus, PostCSS, Pug 컴파일
• 그 외 다수…

설치 방법

먼저 Node.js가 설치되어 있어야 합니다.

설치를 확인하려면 node -v와 npm -v로 버전을 확인합니다. 그다음 아래 명령을 실행합니다.

npm install -g gulp

명령 프롬프트를 사용하기 어렵다면 Git Bash를 추천합니다.

이제 Gulp가 전역에 설치되었으니, 디렉터리를 만들고 로컬에 Gulp를 설치해 사용해봅시다.

mkdir newProject && cd newProject npm init npm install --save-dev gulp

mkdir은 디렉터리를 생성하고, newProject는 그 이름입니다. npm install -g gulp와 달리 npm install --save-dev gulp는 Gulp를 newProject 디렉터리에 로컬로 설치합니다.

첫 gulpfile.js 만들기

newProject 안에 gulpfile.js를 만들고 아래 Gist를 붙여 넣은 뒤 저장합니다.

명령 프롬프트(또는 Git Bash)에서 다음을 실행합니다.

gulp taskname

아래 이미지와 비슷한 결과가 보이면 첫 gulpfile 설정에 성공한 것입니다.

첫 gulpfile

Gist에서 3번 줄에 taskname이라는 이름을 붙였고, 이 이름을 명령어에 사용했습니다. 태스크 이름은 자유롭게 정할 수 있고, default로 지정하면 명령에서 이름을 생략하고 gulp만으로 실행할 수 있습니다.

코드 다루기

Gulp 플러그인으로 CSS에 자동 프리픽스 붙이기

Gulp 사이트에서 Gulp 플러그인을 다양하게 찾아볼 수 있습니다. 저는 Gulp로 JavaScript minify, CSS 미디어 쿼리 통합, 그리고 CSS 벤더 프리픽스 자동 적용을 합니다. 이번 튜토리얼에서는 Gulp의 auto-prefixer 사용법을 보여드리겠습니다.

다음 명령으로 gulp-autoprefixer를 로컬에 설치합니다.

npm install --save-dev gulp-autoprefixer

테스트를 위해 같은 디렉터리에 벤더 프리픽스가 필요한 속성을 가진 CSS 파일을 만듭니다.

gulpfile.js에 아래 스니펫을 붙여 넣습니다.

참고: const gulp = require('gulp');는 항상 gulpfile.js의 최상단에 있어야 합니다.

태스크 이름을 prefix로 지정했으므로 gulp prefix로 실행할 수 있습니다. 6번 줄에서 지원할 브라우저 버전을 설정할 수 있습니다.

• gulp.src는 원본 파일이 위치한 소스 폴더를 가리킵니다.
• gulp.dest는 처리된 파일이 저장될 대상 폴더를 가리킵니다.

이제 태스크를 실행해 CSS가 어떻게 바뀌는지 확인해봅시다.

gulp prefix

끝입니다. Gulp 사이트에서 더 많은 유용한 플러그인을 찾아볼 수 있습니다. 추천:

• gulp-htmlclean
  구조를 보존하는 HTML/SVG 클리너
• gulp-clean-css
  CSS 파일을 minify합니다
• gulp-uglify
  제가 즐겨 쓰는 JavaScript minifier

마치며

이 짧은 튜토리얼이 도움이 되었기를 바랍니다. 제 GitHub 저장소에서 이 포트폴리오에 Gulp를 어떻게 사용했는지 확인할 수 있습니다. 연락은 LinkedIn이나 ghsspower@gmail.com으로 부탁드립니다. 감사합니다!