gulp

gulp란?

개발 작업 시 시간을 소모하는 작업(scss 파일 컴파일 등)을 자동화하는데 도움되는 자동화 도구 

특징으로는,

- 최소한의 API를 제공하여 사용하기 간단하다.

- npm 모듈을 사용하여 수많은 파일 변환에 필요한 플러그인을 제공

이하 세부 참조 : https://github.com/gulpjs/gulp

gulp 설치하기

npm install -g gulp

npm install -g gulp-sass // 파일 컴파일을 위해 필요한 별도 모듈 설치

gulp를 실행하기 위해서,

프로젝트 내부에 gulpfile.js 파일을 생성해야한다.

gulpfile.js는 gulp 실행을 위한 환경 설정을 역할을 한다.

생성한 gulpfile.js에는 어떤 내용을 적어야할까?

우선 주요 api를 살펴보자.

gulp 주요 API

- gulp.task('task명', () => { /* 처리할 내용 */ })

gulp로 컴파일할 task 정의

- gulp.src('compile할 파일 혹은 파일 경로')

컴파일을 진행할 대상 파일들을 선언

gulp.src('src/scss/**/*.scss');

- gulp.pipe('사용할 플러그인')

src 메소드로 받은 파일들을 특정 플러그인으로 전달

var sass = require('gulp-sass');

gulp.src('src/scss/**/*.scss')

    .pipe(sass());

- gulp.dest('저장 경로')

컴파일을 완료한 파일을 저장할 파일 경로

gulp.task('sass', function () {

    return gulp.src('src/scss/**/*.scss')

        .pipe(gulp.dest('src/css'));

});

위의 api들을 사용하여 간단한 gulpfile.js를 생성해보면 다음과 같다. 

다음은 scss 파일을 css로 컴파일하는 내용의 task를 갖고 있는 예제 코드다.

// gulpfile.js

var gulp = require('gulp');

var sass = require('gulp-sass');

gulp.task('sass', function () {

    return gulp.src('src/scss/**/*.scss')

        .pipe(sass().on('error', sass.logError))

        .pipe(gulp.dest('src/css'));

});

gulp 실행하기

커맨드 창에서 gulp task명를 치고 엔터 시 task명 중 task명으로 지정된 작업이 실행된다.

(gulp만 치면 default로 지정된 작업이 실행)