자동화 도구: gulp

Gulp

Gulp는 시간을 소모하는 개발 업무 흐름을 자동화하기 위한 도구입니다.

자세한 내용은 gulpjs.com 에서 확인할 수 있습니다.

시작하기

$ npm install gulp-cli -g
$ npm install gulp -D
$ touch gulpfile.js
$ gulp --help

gulpjs.com 에서 발췌

CLI 도구를 설치하고, 패키지를 설치한 후 gulpfile.js 파일을 만들어서 시작합니다.

뭘 할 수 있지?

gulp는 작업 흐름을 정의하고, 정의된 작업을 실행하는 도구입니다.

어떻게 활용할 것인지를 생각하고, 하고 싶은 동작을 구현해 놓은 플러그인의 도움을 받으면 대부분의 빌드 작업을 자동화할 수 있습니다.

예제

PUG & LESS

gulpjs.com 의 gulpfile.js 의 내용과 같이 pug 파일에서 html 을 생성하고, less 파일에서 css 파일을 생성한 후 축소 minify하는 작업을 정의하고 실행할 수 있습니다.

var gulp = require('gulp');
var pug = require('gulp-pug');
var less = require('gulp-less');
var minifycss = reuqire('gulp-csso');

// html 처리 작업
gulp.task('html',  function() {
    return gulp.src('client/templates/*.pug')
        .pipe(pug())
        .pipe(gulp.dest('build/html'));
});

// css 처리 작업
gulp.task('css', function() {
    return gulp.src('client/templates/*.less')
        .pipe(less())
        .pipe(minifycss())
        .pipe(gulp.dest('build/css'));
});

// 기본 작업으로 html 작업, css 작업을 지정
gulp.task('default', ['html', 'css']);

Typescript

타입스크립트를 컴파일해서 필요한 위치에 출력하는 작업을 gulp로 작성한 예제입니다.

[ProjectDir]/Scripts/**/*.ts 파일을 컴파일해서 [ProjectDir]/wwwroot/js/**/*.js 로 출력합니다.

const
    gulp = require('gulp'),
    rename = require('gulp-rename2'),
    clean = require('gulp-clean'),
    uglify = require('gulp-uglify'),
    ts = require('gulp-typescript');

const
    wwwroot = './wwwroot/',
    sourceroot = './Scripts/';

const paths = {
    ts: sourceroot + '**/*.ts',
    tsDefinitionFiles: 'npm_modules/@types/**/*.d.ts',
    jsDest: `${wwwroot}js/`
};

gulp.task('typescript', ()=>{
    var tsProject = ts.createProject('tsconfig.json');

    return gulp.src([paths.tsDefinitionFiles, paths.ts, '!'+ paths.minJS], {base: '.'})
        .pipe(tsProject())
        .pipe(uglify())
        .pipe(rename((pathObj, file)=>{
            return pathObj.join(pathObj.dirname(file).replace(/^Scripts\/?\\?/, ''), pathObj.basename(file));
        }))
        .pipe(clean({}))
        .pipe(gulp.dest(paths.jsDest));
});

gulp.task('default', ['typescript']);

이 사이트는 광고를 포함하고 있습니다.
광고로 발생한 수익금은 서버 유지 관리에 사용되고 있습니다.

This site contains advertisements.
Revenue generated by the ad servers are being used for maintenance.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다