Gulp #

개요 #

Gulp는 Javascript 빌드 도구로 웹브라우저에 로딩되기 전 소스의 문법을 검사하거나 SASS, Coffee-script와 같은 컴파일이 필요한 언어나 프레임워크, 퍼포먼스를 위해 이미지나 파일의 최적화를 도와주고 테스트 작업 등 프로젝트에서 반복 수행하는 빌드과정, 테스트, 배포 등을 자동화할 수 있게 해주는 도구이다.

빌드과정에 주로 활용되는 테스크(task) #

• concat: 여러 관련 파일을 하나로 병합해준다.
• lint: 빌드과정에서 문법과 코딩스타일의 오류를 캐치해준다.
• uglify/minify: 파일을 최적화해서 퍼포먼스에 도움을 준다.
• watch: 파일의 변경사항을 추적한다.
• server: 내장된 서버와 Livereload/Browsersync 와 같은 툴을 통해 변경사항이 일어날 때마다 자동으로 브라우저가 리로딩되도록 해준다.

설치 및 사용 #

NodeJS 설치 #

먼저 Gulp는 NodeJS를 기반으로 하므로 NodeJS를 설치해야 한다. (맥은 기본제공됨)

“Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.”

Gulp 설치 #

글로벌로 설치한다. #

 npm install -g gulp

프로젝트 디펜던시로 설치한다. #

 npm install --save-dev gulp

gulpfile.js 파일을 생성한다. #

프로젝트 루트에 gulpfile.js 파일을 만든다.

var gulp = require('gulp');
gulp.task('default', function() {
// place code for your default task here
});

Gulp를 실행한다. #

$ gulp

Gulp plugins 설치 #

• gulp-sass: sass를 css로 컴파일해준다.
• gulp-minify-css: css를 최적화(minify)해준다.
• gulp-rename: 파일의 이름을 변경해준다.

• gulp-autoprefixer: CSS 구문을 분석해 vendor-prefixed CSS 속성을 자동으로 추가해준다.

  $ npm install --save-dev gulp-util gulp-sass gulp-minify-css gulp-rename gulp-autoprefixer
  

--save-dev 옵션을 주어 자동쓰기가 되었으므로 package.json 를 보면 다음과 같이 설치한 플러그인들을 devDependencies에서 확인할 수 있다.

"devDependencies": {
    "gulp": "~3.6.1",
    "gulp-minify-css": "~0.3.1",
    "gulp-util": "~2.2.14",
    "gulp-rename": "~1.2.0",
    "gulp-sass": "~0.7.1",
    "gulp-autoprefixer": "0.0.7"
}

gulpfile.js #

테스크러너(Javascript task runner)에 필요한 테스크를 설정한다.

플러그인 로딩 #

require()를 사용하여 플러그인을 로딩한다.

var gulp = require("gulp"),
util = require("gulp-util"),
sass = require("gulp-sass"),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
rename = require('gulp-rename'),
log = util.log;

Gulp tasks #

require()를 사용하여 플러그인을 로딩하고 일반 함수를 선언할 수 있고 NodeJS의 스트림을 이용해서 테스크 과정을 구현한다.

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
    // Do stuff
});

Pipes #

Gulp는 NodeJS의 스크림(Stream)을 기반으로 하는 빌드시스템이므로 읽어들인 파일의 내용을 pipe로 바로 다른 테스크에 전달가능한 구조이다.

gulp.src를 통해 정해진 소스파일을 읽어들이고 sass() 테스크로 gulp.pipe를 이용해서 스트림을 넘긴다. sass 테스크가 수행되면 최종적으로 gulp.dest에 대상 파일이 빌드된다.

gulp.task("sass", function(){
    log("Generate CSS files " + (new Date()).toString());
    gulp.src(sassFiles)
    .pipe(sass({ style: 'expanded' }))
    .pipe(autoprefixer("last 3 version","safari 5", "ie 8", "ie 9"))
    .pipe(gulp.dest("target/css"))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('target/css'));
});