[걸프(Gulp)] 3. gulp-sass

Sass가 무엇인지 그리고 어떻게 사용하는지에 대해서 포스팅을 진행했던 적이 있습니다.

Sass(사스) 소개 및 설치

http://recoveryman.tistory.com/276

Sass(사스) 사용법

http://recoveryman.tistory.com/277

서브라임 텍스트에서 Sass 패키지 설치하기 (코드를 색으로 구분해서 오류를 최소화)

http://recoveryman.tistory.com/278

이번엔 Gulp를 사용해서 Sass 컴파일을 진행해 보려 합니다.

근데.. Gulp를 이용해서 Sass 만 컴파일 하는거로 끝나면 Gulp를 사용 할 이유가 없다고 생각 됩니다.

그래서,

맨 처음 Gulp의 설치하면서 진행했던 html include 를 Sass 컴파일 하면서 동시에 돌리려고 합니다.

아니 왜? 라고 묻는다면...

그런 귀찮은 작업을 각각 따로따로 할 이유가 없기 때문입니다. 사스 컴파일 따로 돌리고, html 파일 include 해주고 이 모든 작업을 따로따로 하는것보다 명령어 한번에 한꺼번에 진행되면 얼마나 빠르고 효과적 일까요? 그러기 위해서 사용하는게 바로 Grunt 와 Gulp입니다.

1. 이전에 fileinclude 태스크를 만들때 선행했던 폴더인 gulpSetting 폴더에서 작업을 이어가겠습니다.

아래 사진을 보시면 Sass 모듈을 설치할 때 --save-dev 옵션을 설치하려는 모듈 이름 뒤에 적었습니다.

gulp-file-include 모듈을 설치할땐 --save-dev 옵션이 설치하려는 모듈 이름 앞에 작성했었지요.

하지만 이건 앞에 옵션을 붙이든 뒤에 옵션을 붙이든 상관 없습니다.

2. Sass를 사용하기 위한 폴더를 이렇게 작업했습니다.

저 혼자만 공부하고 사용해 보는지라 실무하시는 분들은 어떻게 진행하는지는 잘 모릅니다.

include 폴더와 같은 위치에 scssfile폴더를 만들고 test.scss 파일을 만들었습니다. (당연히 Sass 문법을 작성후 저장하였습니다.)

그리고 src의 하위 폴더로 css 폴더를 하나 더 만들었습니다. 이 폴더는 컴파일된 css를 이쪽으로 저장시키기 위해서 입니다.

3. 그리고 gulpfile.js 에 다음과 같이 추가로 작성을 하였습니다.

2번 라인과, 15 ~ 20번까지 라인을 새로 추가했습니다.

17번 라인을 보시면 fileinclude 할 때에는 gulp.src 앞에 return이 없는데 이 return이 있건 없건 같은 결과를 표시합니다.

의미상으론 return을 입력하는게 맞는거 같습니다. 다음의 행동을 돌려주기 때문이죠.

18번째 라인은 scss의 css컴파일을 진행하는 부분이라고 생각하시면 될꺼 같습니다. 또 에러가 출력하면 출력해 줍니다.

19번 라인은 컴파일된 css 파일을 해당되는 경로에서 저장 합니다. 그러면...

var fileinclude = require('gulp-file-include'),
    sass = require("gulp-sass"),
    gulp = require('gulp');
 
// html파일 인클루드
gulp.task('fileinclude', function() {
    gulp.src(['./app/src/index.html', './app/src/sub/*.html'], {base : './'})
    .pipe(fileinclude({
        prefix: '@@',
        basepath: '@file'
    }))
    .pipe(gulp.dest('./'));
});
 
// Sass
gulp.task('sass', function(){
    return gulp.src('./app/scssfile/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./app/src/css'));
});

4. 그러면 실행시켜 보겠습니다.

gulp sass

이 명령어를 터미널 또는 명령프롬프트 창에 입력시키면 sass 라는 task를 실행시킵니다.

잘 되니깐 너무 신나서 여러번 입력해봤습니다. ㅎㅎ

5. 결과는 역시나 잘 생성되어 있고 코드 또한 잘 컴파일 되어 있었습니다.

6. 그럼 저 Sass 모듈 을 실행하는 명령어를 자꾸 반복시켜서줘 입력해야 하느냐 궁금해 하실 수 있습니다.

물론 가능 합니다. 그리고 그게 안된다면 gulp로 Sass 컴파일을 할 필요가 없어요.

아무튼,

18번째 라인에서 outputStyle : '스타일속성' 을 입력하시면 출력되는 css의 스타일 이 달라집니다.

이건 맨위에 Sass 사용법의 13번에 있습니다.

22번 라인부터는 파일에 변화가 일어나면 그걸 감지해서 자동으로 컴파일 해 줍니다. 22번 라인은 자동으로 컴파일 되는 task 이름이 sass:watch 라고 만들었고 이 안의 내용으로 해당 경로 내의 .scss를 찾아내서 gulp sass 를 실행시킨다는 의미 입니다.

var fileinclude = require('gulp-file-include'),
    sass = require("gulp-sass"),
    gulp = require('gulp');
 
// html파일 인클루드
gulp.task('fileinclude', function() {
    gulp.src(['./app/src/index.html', './app/src/sub/*.html'], {base : './'})
    .pipe(fileinclude({
        prefix: '@@',
        basepath: '@file'
    }))
    .pipe(gulp.dest('./'));
});
 
// Sass
gulp.task('sass', function(){
    return gulp.src('./app/scssfile/*.scss')
    .pipe(sass({outputStyle : 'compact'}).on('error', sass.logError))
    .pipe(gulp.dest('./app/src/css'));
});
 
gulp.task('sass:watch', function(){
    gulp.watch('./app/scssfile/*.scss', ['sass']);
});

7. 실험해 봤습니다.

scss의 파일이 수정 될 때마다 로그가 올라가는 모습을 확인할 수 있습니다.

이 자동을 빠져나가는 키는 컨트롤 + C 입니다. 물론 test.css 파일은 수정한 scss 파일이 제대로 컴파일 되어있었습니다.

gulpSetting 폴더 압축본을 올리고 싶었는대 

10메가 가 넘어가네요. 오메...

그래서 gulpfile.js 만 첨부합니다.

gulpfile.js

gulp-sass : https://www.npmjs.com/package/gulp-sass