[gulp-sass] (dart) sass를 위한 gulp 플러그인 설치 및 설정 1

사스(sass), 비쥬얼스튜디오를 사용하면 Live Sass Compiler를 이용해 쉽고 간단하게 사용할 수 있지만, 공동작업이 많은 개발환경의 특성상, 다른 작업자분들의 환경을 고려하지 않을 수 없다. 그래서 찾은 방법이 gulp-sass이다. gulp에 연결해두면, 타 환경에서도 npm만 돌리면 되기에 gulp-sass 설치를 추천한다.

 

다음은 dart sass를 사용하기 위한 설정 방법인데, 자세히 적기엔 너무 많아서 그러하지 못하였고, 어떤 플러그인을 설치해야하는지, 각 플러그인이 어떤 용도인지 정도만 기입하였다. 그럼 오늘도 즐거운 코딩!

1. 설치

npm install --save-dev gulp-sass gulp-sourcemaps fibers dart-sass 

2. gulpfile.js 설정

const dartSass = require('dart-sass'); // dart sass
const sass = require('gulp-sass'); // gulp-sass 연결(기본)
const Fiber = require('fibers'); // dart sass 이용시 gulp-sass와 세트 플러그인
const sourcemaps = require('gulp-sourcemaps'); // css.map 파일 생성용
 
gulp.task('sass', function(){
  const options = {
    sass : {
      outputStyle: 'expanded', // 스타일: nested(default), expanded, compact, compressed
      indentType: 'tab', // 들여쓰기 타입: space(default) , tab
      indentWidth: 1, // 들여쓰기 수: 2(default)
      compiler: dartSass
    },
  };
  return gulp
    .src("src/scss/*.scss") // 불러올 scss 위치 지정
    .pipe(sourcemaps.init()) 
    .pipe(sass({fiber:Fiber}).on('error', sass.logError))
    .pipe(sourcemaps.write('./maps')) // 저장할 map 저장 위치 지정
    .pipe(gulp.dest("dist/scss")) // 변환된 css 저장 위치 지정
});

gulp.task(
    "default",
    gulp.parallel("sass") 
);

+ watch 에 대하여

gulp-sass 공식 페이지를 살펴보면, 다음과 같은 코드가 있다.

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']); // 감시할 scss 위치 지정
});

이는 감시할 scss를 지정하고, 지정된 scss에 변화가 감지되면 터미널에 어느 파일이 바뀌었는지 알려준다.

[Browsersync] 2 files changed (common.css.map, common.css)
[00:00:00] Finished 'sass' after 423 ms

문제는 감지만 할 뿐이다. 그래서 필자는 gulp-sass와 browser-sync를 함께 사용하는 걸 추천한다(변화 감지시 즉시 컴파일하여 서버에 바로 적용: 마치 vscode의 Live Server와 같이 새로고침없이 바로 확인 가능하다). 코드는 아래 링크에서 확인 가능하다. 

[로컬 테스트 서버] browser-sync + gulp-sass : scss 수정하고 바로 확인하자

2021/01/07 - [web/gulp] - gulp 설치 + .src() .pipe() .dest()

2021/01/08 - [web/gulp] - [gulp-sass] (dart) sass를 위한 gulp 플러그인 설치 및 설정 2

2021/01/08 - [web/gulp] - [css 초기화] gulp-sass + node-normalize-scss