css 파일 번들링 gulp

react, vuejs 등의 프로젝트는 번들링을 필수로 사용하겠지만,

전통적인 일반 웹사이트에서는 html, css, javascript(lib) 가 짬뽕이 되어 사용되는것이 일반적입니다.

 

일반적인 웹사이트에서도 

css 는 sass(SCSS) 를 사용하는 경우 여러 장점이 있기 때문에 퍼블리싱을 전문으로 하는 경우에는 필수적이기도 합니다.

sass를 일반 웹사이트에서 사용하기 위해서는  node-sass 를 개발툴에 연동하여 사용합니다.

phpstorm(or webstorm) 이나 vscode 의 경우 간단한 설정으로  실시간 변환이 가능합니다.

개발툴에서 사용하는 경우 몇가지 아쉬운 점이 있는데, 번들링이 어렵다는 점임입니다.

그렇다고, scss 파일을 하나로 만들면 소스를 관리하기 어려워집니다.

 

최근 진행하는 프로젝트에 scss 가 페이지별로 적용되고, 파편화가 심해질것 같아, 간단하게 번들링하는 툴을 설정하여 진행하였습니다.

번들링 툴들이 다양하여 어떤것을 쓸지 테스트해본 결과, 단순 scss 변환과 css 번들링에는 gulp 만으로 충분할것 같아 다음과 같이 설정하였습니다.

 

먼저 package.json 입니다.

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "preinstall": "npx npm-force-resolutions"
  },
  "resolutions": {
    "graceful-fs": "^4.2.4"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "del": "^6.1.1",
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^5.1.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-uglify": "^3.0.2",
    "gulp-util": "^3.0.8",
    "sass": "^1.67.0"
  }
}

 

gulpfile.js 입니다.

const gulp  = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const del = require('del');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const cleanCSS = require("gulp-clean-css");
const sourcemaps = require('gulp-sourcemaps');
const rename = require('gulp-rename');
//del 모듈은 7.x.x 이상인 경우 esm 모듈로 변경되었음으로 rquire 사용할수 없음. 6.9.x 를 사용

const statyleSrc = 'sass';
const styleDist = 'css';
gulp.task('styles', () => {
   return gulp.src('sass/**/*.scss')
       .pipe(sourcemaps.init())
       .pipe(sass().on('error', sass.logError))
       .pipe(sourcemaps.write())  // Source maps 쓰기
       .pipe(gulp.dest('./css/'));
});

gulp.task('minify-css', () => {
    return gulp.src(['css/**/*.css', '!css/**/*.min.css'])
            .pipe(cleanCSS())
            .pipe(rename((path) => {
                path.basename = path.basename.replace('.min', '');
            }))
            .pipe(rename({ suffix: '.min' }))  // 파일 이름에 .min 추가
            .pipe(gulp.dest('css'));  // 저장 위치를 'css'로 설정
});

gulp.task('clean', () => {
   return del([
       'css/main.css'
   ])
});

gulp.task('default', gulp.series(['clean', 'styles', 'minify-css']));

gulp.task('watch', () => {
    gulp.watch('sass/**/*.scss', (done) => {
       gulp.series(['clean', 'styles', 'minify-css'])(done);
    });
});

 

인터넷에 있는글과 동영상을 보면서 npm 라이브러리 버전과 gulpfile.js 를 설정하였습니다.

중간중간 버전 문제난 esm 문제, fs 오류가 발생하여 완전한 코드를 만드는데는 시간이 좀 걸렸습니다.

조금 고생은 했지만, 처음 생각한대로 동작하여, 만족합니다.