017. JeKyll 컨텐츠 - (10) Asset

컨텐츠 - (10) Asset

본 카테고리는 정적 블로그 생성도구인 Jekyll에 관하여 작성하는 곳이다.

공식 사이트의 내용을 좀 더 풀어쓰고 스크린샷을 첨부하여 좀 더 상세히 기록하고자 한다.

참고 Jekyll 공식 사이트

들어가기 전에

참고 Velopert의 Sass 강좌

Asset

Jekyll은 Sass에 대한 기능을 내장하고 있어 기본 기능으로 제공한다.

또한 Ruby gem을 통해 Coffeescript로 작업할 수도 있다.

Sass를 사용하려면 올바른 확장명을 가진 파일을 생성하고 해당 파일이 YAML 머리말과 같이 두 개의 삼중선(—)으로시작하도록 작성해야 한다.

올바른 확장명 : .sass, .scss, .coffee

---
# 이 부분에 아무것도 존재하면 안된다.
---

# 아래처럼 두 줄만 입력한다
---
---
// start content
.my-definition
  font-size: 1.2em

Jekyll은 위와 같은 파일을 일반적인 페이지와 동일하게 처리한다.

동일하게 처리한다는 말은 출력되는 파일이 소스와 동일한 디렉토리에 저장된다는 말이다.

예를 들어 소스 폴더에 css/styles.scss라는 파일이 있다고 가정하자.

Jekyll은 사이트를 생성할 때 해당 파일을 처리한 후 출력되는 폴더 에 css/styles.css로 저장한다.

참고 출력되는 폴더는 일반적으로 _site폴더이다. 환경변수의 destination을 확인하자.

웹 브라우저는 scss파일을 읽을 수 없기때문에 Jekyll이 css파일로 변환하는 것이다.

참고 Jekyll의 Asset 파일내 javascript 처리
Jekyll은 Asset 파일의 모든 Liquid 필터와 태그를 처리한다.
Mustache 또는 Liquid 템플릿 구문과 충돌하는 다른 javascript 관련 코드가 존재하는 경우 `와 ` 태그를 사용해야 한다.

Sass / SCSS

Jekyll을 이용해 Sass 변환을 커스터마이징할 수 있다.

모든 Sass과 연관된 파일을 sass_dir 폴더에 배치한다.

sass_dir의 기본값은 <source>/_sass으로 설정되어 있다.

기본 Sass이나 SCSS 파일을 <source>/csss와 같이 <destination>의 출력하고 싶은 위치에 배치한다.

참고 jekyll-sass-converter 예제 사이트

만약 Sass 파일이 @import 구문을 사용하는 경우엔 sass_dir의 값이 Sass파일이 들어있는 기본 디렉토리로 설정되어 있는지 확인해야 한다.

sass_dir은 아래와 같이 지정할 수 있다.

sass:
    sass_dir: _sass

다시 언급하는 것이지만 Sass변환기의 sass_dir 기본값은 _sass로 설정되어 있다.

주의 sass_dir은 오직 Sass에서만 사용한다.
sass_dir은 Sass을 가져오기 위한 경로일 뿐이고, 다른 역할은 수행하지 않는다.
이는 Jekyll이 Sass 파일들에 대해 직접적으로 인지하지 못함을 의미하며 위에서 언급한 YAML 머리말 영역에 값을 가지고 있어선 안됨을 뜻한다.
만약 YAML 머리말을 가지고 있다면 Jekyll은 해당 파일에 변환 작업을 수행하게 될 것이다.
따라서 sass_dir로 지정된 폴더에는 불러올(import) 파일들만 존재해야 한다.

또 다른 방법으로는 _config.yml파일에 설정값을 주는 방법이 있다.

아래의 예시를 보자.

sass:
    style: compressed

위와 같이 sass에 style값을 선언하여 출력하는 스타일을 지정할 수도 있다.

위의 설정은 Sass에서 읽어들여 사용하므로 Sass가 지원하는 유효한 출력스타일을 사용할 수 있다.

Coffeescript

Jekyll 3.0 이상인 버전에선 Coffeescript를 활성화 하려면 jekyll-coffeescript gem을 설치해야 한다.

gem install jekyll-coffeescript

위의 명령어로 jekyll-coffeescript를 설치할 수 있다.

그 이후 _config.yml이 최신인지 확인 후 아래와 같은 내용이 포함되어 있는지 확인한다.

gems:
 - jekyll-coffeescript