[파일압축2] gulp-clean-css : 넌 거리두기 하지마(minify)

css는 경량화한다 해도 읽히는 속도차가 크지 않아, 경량화작업을 하시는 분도 계시고 안하시는 분도 계신다. 필자의 경우, 서버용이니 아주 조금이라도 빨리 읽히게 하기 위해, 또, '코드 도둑들, 조금이라도 귀찮게 해 주겠어!!' 마인드로 경량화를 돌리는 편이다(물론 경량화를 다시 정렬해주는 사이트도 많고 플러그인도 많다). 

 

src > css > a.css :

body { padding: 0; margin: 0; } 

src > css > b.css :

div { width: 200px; height: 200px; margin: 40px auto; }

1. 설치

npm install --save-dev gulp-clean-css

2. gulpfile.js 설정

const gulp = require("gulp");
const concat = require("gulp-concat");
const cleanCss = require("gulp-clean-css"); // ★★★★ add

gulp.task("create-clean-css", function(){
    return gulp
        .src("src/css/*.css")
        .pipe(concat("style.css"))
        .pipe(cleanCss({ compatibiliy: 'ie8' })) // ★★★★ add
        .pipe(gulp.dest("dist/css"))
});

gulp.task(
    "default",
    gulp.parallel("create-clean-css") 
);

3. gulp 실행

gulp

4. 결과물: dist > css > style.css

body{padding:0;margin:0}div{width:200px;height:200px;margin:40px auto}

2021/01/07 - [web/gulp] - gulp 설치 및 .src() .pipe() .dest() / 설명 추가

2021/01/08 - [web/gulp] - [파일압축1] gulp-concat : 파일들아 모여라