[파일압축1] gulp-concat : 파일들아 모여라

운영관리를 위해, 작업파일은 여러개의 css(scss), javascript 파일로 나누는 것이 좋지만, web 서버에 여러개 올리는 것은 옳은 선택이라 보기 어렵다. 서버의, 서버에 의한, 서버를 위한 파일 압축 플러그인! gulp-concat의 설명법이다.

 

a.css :

body { padding: 0; margin: 0; } 

b.css :

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

1. 설치

npm install --save-dev gulp-concat

2. gulpfile 설정

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

gulp.task("create-clean-css", function(){
    return gulp
        .src("src/css/*.css") 
        .pipe(concat("style.css")) // ★★★★ gulp-concat 실행 후 변환 저장될 파일명 지정
        .pipe(gulp.dest("dist/css"))
});

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

: gulp야,

'src/css'에 위치한 css파일들을 모두 읽고,

하나로 압축해서 'style.css' 파일로,

'dist/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] - [파일압축2] gulp-clean-css : 넌 거리두기 하지마(minify)