gulp-sass 설치하기

Gulp 4.* 버전 기준으로 설명합니다.

이번에는CSS의 전처리기(CSS Preprocessor)인 SCSS로 스타일을 작성하여 CSS로 컴파일하는 작업을 위한 테스크를 작성합니다.

SCSS, SASS, LESS가 무엇인지 알고 싶다면?
바로가기

🥤 gulp-sass 설치하기

npm -D gulp-sass

gulp-sass 플러그인을 설치해 줍니다.

개발자도구에서 sass 라인을 알려주는 소스맵 플러그인도 별도로 설치했어야 했는데, 걸프가 업데이트되면서 기본 지원합니다. 그만큼 사용자들이 많았나 봅니다 👍
이전 글에서도 말했듯이 --save는 작성하지 않으셔도 됩니다.

"devDependencies": {
    "gulp": "^4.0.2",
    "gulp-sass": "^4.1.0"
}

설치가 잘 되었다면 package.json에 개발 의존성 목록에 추가됩니다.

SCSS TO CSS 컴파일하기

비구조화 할당

const { src, dest } = require('gulp');

코드를 간략하게 작성하기 위해 상단에 상수를 비구조화 할당합니다.

gulp.src 를 src만 작성하면 되도록 해줍니다.

<!-- DON'T -->

function styles() {
    return gulp.src(paths.css.src)
}

<!-- DO -->
function styles() {
    return src(paths.css.src)
}

const sass = require('gulp-sass');

설치한 sass 플러그인도 사용하기 편하게 상수 선언합니다. sass, style 등 상수명은 편할대로 합니다.

SCSS 경로 설정

const  paths = {
    css: {
        src:  './src/scss/*.scss',
        dest:  './dist/css'
    }
}

그리고 관리하기도 편하고, 코드의 가독성도 높여주기 위하여 경로도 선언하여 담아 두겠습니다.

src / dest
src는 개발용, dest는 빌드될 폴더입니다. 즉, 우리는 src에서만 작업하고 dest 파일들은 건드릴 일이 없습니다~!

src: './src/scss/*.scss’
*은 와일드카드 문자로 모든 파일을 의미합니다. scss 폴더 하위에 있는 scss형식의 모든 파일을 가리킵니다.

SCSS TO CSS 컴파일 함수

이제 scss를 css로 컴파일하는 태스크를 작성하겠습니다.
이전에는 gulp.task(‘taskName’, function() {}); 사용했지만 4.0부터는 일반 js 함수로 작성하기를 권장합니다.

function  styles() {
    return  src(paths.css.src, { sourcemaps:  true }) // 컴파일 할 경로
    .pipe(sass({ 
        outputStyle:  'expanded',
        sourceComments:  false // 주석
    }).on('error', sass.logError)) // sass 옵션
    .pipe(dest(paths.css.dest, { sourcemaps:  true })) // 컴파일 후 경로
}

pipe 메서드를 통해 플러그인을 연결해줍니다.
sourcemap의 기본값은 false이므로 true로 설정합니다.

중간에는 sass 옵션입니다. scss를 어떤 스타일로 컴파일할 것인지를 의미합니다.

scss output style

Input button.scss

.btn {
    display: inline-flex;

    &.lg {
        height: 36px;
    }
}

Output button.css

• nested
• compact
• compressed
• expanded

/* --------------- nested --------------- */
.btn {
    display: inline-flex; }
    .btn.lg {
    height: 36px; }
/* --------------- nested --------------- */



/* --------------- compact --------------- */
.btn { display: inline-flex; }

.btn.lg { height: 36px; }
/* --------------- compact --------------- */



/* --------------- compressed --------------- */
.btn{display:inline-flex;}.btn.lg{height:36px}
/* --------------- compressed --------------- */



/* --------------- expanded --------------- */
.btn {
    display: inline-flex;
}

.btn.lg {
    height: 36px;
}
/* --------------- expanded --------------- */

클라이언트 배포용이라면 제일 축소시켜주는 compressed 스타일을 권장합니다.

빌드된 파일이 개발자 전달용인지 클라이언트인지에 따라 설정해 주세요.

가독성 높이기

const  options = {
    scss: {
        outputStyle:  'expanded',
        sourceComments:  false
    }
}    

저는 코드의 가독성을 더 높이기 위해 이 옵션 내용도 상단에 따로 작성해 줍니다.

options.scss 안에 내용을 담습니다.

function  styles() {
    return  src(paths.css.src, { sourcemaps:  true })
        .pipe(sass(options.scss).on('error', sass.logError))
        .pipe(dest(paths.css.dest, { sourcemaps:  true }))
}

styles function을 수정합니다.

자, 이제 css로 컴파일 할 태스크가 끝나갑니다! 😁

exports.style = styles;

이 태스크를 사용하기 위해 export 해줍니다.

gulpfie.js 최하단에 작성하고 터미널에서 gulp style을 하면 dist/css에 button.scss가 아니라 button.css 파일이 생기는 것을 확인할 수 있습니다.

물론 컴파일 전에 scss 폴더에 아무 scss나 생성해줘야 테스트 할 수 있겠죠?

완성 코드

const { src, dest } = require('gulp');

const sass = require('gulp-sass');

const paths = {
  css: {
    src: './src/scss/*.scss',
    dest: './dist/css'
  }
}

const options = {
  scss: {
    outputStyle: 'expanded',
    sourceComments: false
  }
}

function styles() {
  return src(paths.css.src, { sourcemaps: true })
    .pipe(sass(options.scss).on('error', sass.logError))
    .pipe(dest(paths.css.dest, { sourcemaps: true }))
}

exports.style = styles;