#2. Glup로 퍼블리싱 개발환경 만들기 - 전처리 스타일시트

사실 Glup를 쓰게된 가장 큰 이유는 SCSS로 스타일시트를 적용하고 싶어서다. 나중에 SCSS에 대해서 다루긴 하겠지만 어째서 SCSS를 쓰고 싶을까에 대해서 잠깐, 아주 잠깐 이야기하자면 일단 CSS 주제에 변수를 만들 수 있고 그걸 통해 반복작업을 줄일 수 있다. 스타일시트를 HTML처럼 계층적으로 적용할 수 있어서 셀렉터를 길게 쓸 필요도 없고 코드를 보다 효율적으로 작성할 수 있다는 장점이 있다. 말로만 설명하니 이해가 좀 어려울 수도 있는데 이와 관련해서는 나중에 포스팅해서 링크를 달아두도록 하겠다.

 

아무튼 여러모로 유용한 이 SCSS의 문제는 브라우저에서 바로 확인이 안된다는 점이다. SCSS로 짜여진 스타일시트를 컴파일해서 CSS로 변환하는 과정을 거치고나야 비로소 브라우저에서 확인 할 수 있는데 Gulp를 통해 이를 자동화 처리하는걸 오늘 배워볼거다.

지난 시간 Node.js를 다들 설치했으니 바로 시작해보도록 하겠다.

 

일단 디렉토리를 하나 만들자. 나는 gulp-sample이라고 이름 지어주겠다.

 

저 폴더 안에 들어가서 명령프롬프트를 열든 파워쉘을 열든 하자. Windows10이면 파워쉘은 기본 장착이니 파워쉘을 이용해보겠다.

 

gulp-sample 폴더 안에 들어가서 상단 "파일"메뉴를 열면 Windows PowerShell 열기라는 메뉴가 있다.

저거 누르면 파란바탕에 하얀 글씨 나온다. 거기다가 아래의 명령을 차례대로 입력하자.

$ npm install gulp-cli -g
$ npm init
$ npm install gulp -D
$ npx -p touch nodetouch gulpfile.js

혹시 모를까봐 친절하게 설명해주면 앞에 "$"는 입력하는게 아니다. 암튼, "npm init" 명령을 입력할 때 뭐 이것저것 물어볼텐데 걍 다 엔터치면 되니까 신경쓰지 말자. 잘못한다고 나중에 문제되고 그렇지 않으니까 걱정 노노.

 

암튼 npx 명령까지 진행하고 나면 폴더에 파일들이 막 생겨났을거다.

이제 준비가 되었다. Visual Studio Code를 이용해 gulpfile.js 파일을 수정해보자.

Visual Studio Code 설치는 어떻게 하는 것이냐고 물어보시는 분 계실까봐 링크 담아둔다. 참고해라.(https://blog.thereis.xyz/14)

 

암튼 저렇게 Visual Studio Code를 실행하고 gulpfile.js를 열어보자

그렇다 암것도 없다. 그러므로 이제 부터 코드를 하나씩 적어보도록 하자. 일단 작업공간을 만들어줄 필요가 있는데 나는 workspace라고 이름지어주겠다. 이건 작업하는 사람 마음이니까 알아서 이름을 잘 지어주도록 하자.

그리고 하위에 이미지, 스타일시트, 폰트 등등등이 들어가는 폴더들도 다 같이 만들어주자. 본인의 입맛대로 만들어라. 나도 나대로 만들겠다.

폴더 만드는 방법

여기까지 대충 만들어졌으면 SCSS를 컴파일 하기위한 패키지를 설치할거다. 파워쉘에다가 아래의 명령어를 입력하자.

$ npm install gulp-sass -D
$ npm install gulp-sourcemaps -D

패키지 설치가 완료되면 gulpfile.js 파일을 아래와 같이 수정한다.

 

var gulp = require('gulp');
var scss = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

// 소스 파일 경로
var PATH = {
    ASSETS:  {
        FONTS:      './workspace/assets/fonts'
        , IMAGES:   './workspace/assets/images'
        , STYLE:    './workspace/assets/style'
    }
},
// 산출물 경로
DEST_PATH = {
    ASSETS: {
        FONTS:      './dist/assets/fonts'
        , IMAGES:   './dist/assets/images'
        , STYLE:    './dist/assets/style'
    }
};

gulp.task( 'scss:compile', () => {
    return new Promise( resolve => {
        var options = {
            outputStyle: "nested" // nested, expanded, compact, compressed
            , indentType: "space" // space, tab
            , indentWidth: 4 // 
            , precision: 8
            , sourceComments: true // 코멘트 제거 여부
        };

        gulp.src( PATH.ASSETS.STYLE + '/*.scss' )
            .pipe( sourcemaps.init() )
            .pipe( scss(options) )
            .pipe( sourcemaps.write() )
            .pipe( gulp.dest( DEST_PATH.ASSETS.STYLE ) );
        
        resolve();
    });
});

gulp.task( 'default', gulp.series(['scss:compile']));

간단하게 설명을 하자면 gulp의 업무를 하나하나 만들어내는데 사용되는 메서드는 task 라는 메서드다. 그래서 gulp.task() 라고 입력을 하면 업무가 하나 생성되는데 첫번째 파라미터로 업무의 이름, 두번째는 업무의 내용이다. 업무의 내용으로 비동기 방식의 Promise객체를 반환하는 함수를 넣어주면 된다.

 

gulp의 플러그인 중에 sass, scss를 컴파일 해주는 'gulp-sass'를 설치하고 위와 같이 적용하면 된다. 중간에 sourcemaps 를 추가해줬는데 이는 scss를 크롬에서 디버깅하도록 만들어준다.

 

이렇게 gulpfile.js를 만들었으니 테스트용으로 스타일 시트를 하나 만들어보자.

default.scss 파일을 하나 만들고 코드를 아래와 같이 작성했다.

@charset 'utf-8';

html, body {
    margin: 0;
    padding: 0;
}

그리고 아까 파워쉘에다가 아래의 명령어를 입력한다.

$ gulp

이렇게 수행하고 나면 갑자기 dist 폴더가 만들어지고 컴파일되어 나온 default.css 파일을 확인할 수 있다.

 

아래 이미지 맵도 만들어져있는걸 확인할 수 있다.

 

자, 오늘은 스타일시트를 컴파일해서 배포하는 것 까지 확인했다. 다음 시간엔 이미지들과 폰트, HTML 파일을 배포하는 것을 해보도록 하자.

 

안녕!!