Gulp 환경에서 CSS파일에 처리 적용할 업무는 문법 검사, 코드 병합, 압축 과정으로 필요한 모듈은 gulp-csslint, gulp-concat-css, gulp-uglifycss 이다.

설치하기

npm install --save-dev gulp-csslint gulp-concat-css gulp-uglifycss

설정하기

var csslint 	= require('gulp-csslint');
var concatcss 	= require('gulp-concat-css');
var uglifycss 	= require('gulp-uglifycss');
/**
* CSS
* gulp-csslint(문법 검사) > gulp-concat-css(병합) > gulp-uglifycss(압축)
*/
gulp.task('style', function(){
gulp.src('src/css/**/*.css')
.pipe(csslint({'import': false })) // CSS 문법 검사
.pipe(csslint.reporter())
.pipe(concatcss('style.css')) // CSS 파일 병합
.pipe(uglifycss()) // CSS 압축
.pipe(gulp.dest('dist/css/')) 
});

문법 검사를 하고 병합을 한 후 압축을 한 뒤에 ‘dist/css’폴더에 배포 하는 것이다.

CSS @import 규칙으로 파일 병합 처리

CSS @import 규칙을 사용하여 분리된 CSS파일을 먼저 가져올 수 있다.

path
– reset.css
– header.css
– gnb.css
– main.css
– style.css

gulp-concat-css 모듈로 사용한 style 업무를 활용하면 @import 규칙을 사용하는 데 전혀 문제가 없다.
‘import’:false를 할 경우 csslint() 함수에 옵션 값을 무시하도록 설정해야 한다..