/ ET-CETERA

Gulp CSS Compile 문제 해결

Introduction

Jekyll에서 CSS를 수정한 후 적용하기 위해서 Gulp를 이용하는 방법에 대한 내용입니다.

제 블로그를 예로 들어 설명하면 사용하는 CSS 파일은 /assets/css 폴더안에 위치해 있습니다. CSS 파일을 수정한 후 Gulp를 이용하여 compile을 해야 하는데 사용하는 gulpfile.js의 내용은 다음과 같습니다.

var gulp = require('gulp');

// gulp plugins and utils
var gutil = require('gulp-util');
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
var imagemin = require('gulp-imagemin');

// postcss plugins
var autoprefixer = require('autoprefixer');
var colorFunction = require('postcss-color-function');
var cssnano = require('cssnano');
var customProperties = require('postcss-custom-properties');
var easyimport = require('postcss-easy-import');

gulp.task('images', function() {
    return gulp.src('assets/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('assets/built/images/'))
});

gulp.task('css', function () {
    var processors = [
        easyimport,
        customProperties,
        colorFunction(),
        autoprefixer({browsers: ['last 2 versions']}),
        cssnano()
    ];

    return gulp.src('assets/css/*.css')
        .pipe(sourcemaps.init())
        .pipe(postcss(processors))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('assets/built/'))
});

nodejs를 설치한 후 npm을 이용하여 필요한 module을 설치합니다. 여기서 주의할 점은 node의 버전이 12버전이면 js파일에서 오류가 발생할 수 있습니다. gulp의 버전과 node의 버전에 따라서 compile 오류가 발생할 여지가 있기 때문에 만약 오류가 발생하면 버전문제를 해결해야 합니다. (저의 경우는 nodejs 버전을 11버전으로 낮추어서 사용했습니다.)

compile이 성공하면 결과 파일은 /assets/built 폴더 하단에 CSS파일로 저장되게 됩니다.

End.