gulp를 이용한 sass 컴파일

gulp를 이용한 sass 컴파일

1. node.js 설치 (ruby가 아닌 node를 이용함)

Node.js

2. 프로젝트 폴더의 커맨드 창(cmd) or shell에서 npm init 실행으로 package.json 생성

3. npm install --global gulp-cli 글로벌 설치

4. npm install --save-dev gulp 로컬 설치 (--save-dev 옵션으로 개발과정으로만 사용)

5. npm i gulp-sass sass 모듈 설치

6. gulpfile.js 생성후 코드 작성 (gulpfile 작성은 gulp 사이트에서 확인)

gulp.js

7. 컴파일 태스크 작성

const path = {
    scss: "src/scss/**/*.scss",
};

const tmp = {
    css: "tmp/css",
};

function scssDevTask(){
    return src(path.scss, { sourcemaps: true }, { since: lastRun(scssDevTask) })
    .pipe(sass({outputStyle: 'compact'})) 
    .pipe(dest(tmp.css, { sourcemaps: './maps' }));
}

 

8. watch 태스크 및 컴파일 실행 등록

function watchTask(){
    watch(path.scss, series(scssDevTask));
}

exports.default = series(
    scssDevTask,
);

9. gulp 실행후 컴파일