Gulp로 SASS를 CSS로 변환하기

들어가며

앞서 gulp 라는 모듈을 불러와서 hello 라는 task를 만들어서 작업을 해보았다.

이와 비슷한 방식으로 SASS파일을 CSS파일로 변환하고 계속 지켜보며 SASS가 변하는 즉시 CSS로 컴파일해주는 watch를 공부해보겠다.

1. 'gulp-ruby-sass' 모듈로 변환하기

window키 + R 을 누르고 cmd 를 입력하여 command 창을 띄우고 아래 명령어를 입력하여 gulp-ruby-sass 모듈을 설치한다.

npm install --save-dev gulp-ruby-sass

제대로 설치가 완료되었다면 package.json 파일에 의존성 주입이 되었을 것이다.

모듈설치 후 package.json에 의존성주입이 된 모습

이제 gulpfile.js 로 돌아가서 아래 코드를 추가하자.

var sass = require('gulp-ruby-sass');

위 코드로 sass를 css로 변환하기 위한 모듈을 불러온다. 우리가 방금 설치한 것이 그것이다.

그리고 작업해야할 task를 만들어주자.

gulp.task('sass',function(){
    return sass('./css/*.scss')
        .on('error',function(err){
            console.error('Error!',err.message);
        })
        .pipe(gulp.dest('./css'));
});

sass 란 task를 만들었고 return 값을 보면 css폴더에 속한 모든 scss 파일들을 css파일로 변환할 것이고 변환된 css파일은 css폴더 밑에 위치시킬것이다.

자 이제 코드도 입력하였으니 변환해 보도록하자.

command 창에서 아래 명령어를 입력하자.

gulp sass

성공적으로 변환이 되었다!

성공적으로 변환이 되었다.. 과연 그 결과는??

보이는가? 컬러풀하면서 깔끔하게 정리가 되었다.

2. watch를 이용해서 변경사항 바로 적용하기

우리는 앞서 scss파일을 css파일로 변환하는데 성공하였다.

그런데 문제는 scss파일에 수정사항이 생길때마다 매번 컴파일을 해줘야 한다는 것.

이런 귀찮음을 방지하기 위해 watch 라는 기능이 있다.

scss 파일을 주시하다가 변경이 있으면 자동으로 컴파일을 한다.

넘나 편한것!

역시 gulpfile.js 에서 작업할 것이다.

gulpfile.js 에 아래코드를 추가한다.

gulp.task('sass:watch',function(){
    gulp.watch('./css/*.scss',['sass']);
});
 

css폴더 밑에 있는 모든 scss를 지켜보다가 변경사항이 생기면 컴파일해준다. I'll watching you...

command 창에서 실행시켜야 지켜본다. 

3. 변환과 watch를 한번에 하기

위 방식대로 하면 2번의 작업을 해야한다.

변환하기 한번, 지켜보기 한번.

이 작업을 모아서 gulp의 기본작업으로 정의하고 따로 task를 만들어 보자.

gulp.task('default',['sass','sass:watch']);

default  라는 task 를 만들어서 그 안에 변환하기task( sass )와 지켜보기task ( sass:watch )를 넣어주자.

그러면 default 라는 task만 실행시켜도 2가지가 한번에 실행된다.

gulp default

sass변환과 watch를 한번에?!

마치며

sass변환과 watch외에도 필요한 기능들을 넣어서 default task에 넣어준다면 손쉽게 기본셋팅이 가능하다.

지금까지 작업한 gulpfile.js를 올리며 글을 마친다.

'use strict';
 
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
 
gulp.task('default',['sass','sass:watch']);
 
gulp.task('sass',function(){
    return sass('./css/*.scss')
        .on('error',function(err){
            console.error('Error!',err.message);
        })
        .pipe(gulp.dest('./css'));
});
 
gulp.task('sass:watch',function(){
    gulp.watch('./css/*.scss',['sass']);
});