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.