마크다운(Markdown)을 HTML로 컴파일 자동화하기

원문 : VS 문서

마크다운 형식의 파일을 자동으로 HTML 파일로 컴파일 하도록 해보겠습니다.

Visual Studio Code (이하, VS Code 또는 비쥬얼 스튜디오 코드)의 내장된 작업실행기(Task runner)를 통하여 Markdown 컴파일러를 통합 할 수 있습니다. 이를 통해 .md 파일을 .html 파일로 컴파일 할 수 있습니다.

0 단계 : Markdown 문서 작성

비어있는 폴더에서 VS Code 를 실행하고, 컴파일을 할 파일을 작성합니다.

여기서 주의할 점은 폴더를 열어야 한다는 것입니다. 메뉴에서 파일(F) > 폴더 열기(F)... 또는 커맨드라인에서 폴더로 이동한 후, code . 을 입력하여 폴더를 열 수 있습니다.

1 단계 : Gupl 와 plug-ins 설치

Gulp 를 사용하여 자동으로 마크다운 컴파일 작업을 만들도록 하겠습니다. 조금 더 쉽게 작업할 수 있도록 gulp-markdown plug-in 을 사용하도록 하겠습니다.

gulp 를 전역(-g)과 지역으로 모두 설치할 필요가 있습니다.

npm install -g gulp
npm install gulp gulp-markdown-it

명령어 줄에 gulp -v 를 입력하여 버전을 확인해봅니다. gulp 가 성공적으로 설치되었다면 버전이 표시될 것입니다. 다음은 windows 10 에서 수행한 것입니다.

[20:26:37] CLI version 3.9.1
[20:26:37] Local version 3.9.1

2 단계 : 간단한 Gulp 작업 만들기

md 파일과 tasks 파일이 있는 폴더에서 비쥬얼 스튜디오 코드(VS Code)를 실행하고, gulpfile.js 를 루트폴더에 생성합니다.

아래의 소스코드를 그 파일에 붙여 넣습니다.

var gulp = require('gulp');
var markdown = require('gulp-markdown-it');

gulp.task('markdown', function() {
    return gulp.src('**/*.md')
        .pipe(markdown())
        .pipe(gulp.dest(function(f) {
            return f.base;
        }));
});

gulp.task('default', ['markdown'], function() {
    gulp.watch('**/*.md', ['markdown']);
});

무슨 일을 하는 코드입니까?

1. 우선, 작업 폴더에서 Markdown 파일의 변경을 감시합니다.
2. 변경된 Markdown 파일들을 받아, 컴파일러(즉, gulp-markdown-it)를 통해서 실행합니다.
3. 기존의 Markdown 의 이름을 그대로 가지고 있는 HTML 파일을 얻습니다. 그리고 그것을 동일한 폴더에 높습니다.

3 단계: gulp 기본 Task 실행하기

작업(T) > 작업 실행(R) 메뉴를 차례로 선택합니다.

화면에 표시되는 목록에서 gulp: default 를 선택하여 작업을 시작합니다.

다음 화면에서 그저 Markdown 파일을 HTML 로 변경하고 싶으니, 작업 출력 스캔 안 함 을 선택합니다.

이 후, 여러분이 Markdown 파일을 생성/수정하면, 해당하는 이름의 HTML 파일이 생성되거나 Markdown 파일이 저장할 때 반영되는 것을 확인할 수 있습니다. 자동 저장 기능을 활용하여 이 기능이 물 흐르듯이 자연스럽게 수행되게 할 수 도 있습니다.

만약 gulp: default 작업을 기본 빌드 작업으로 Ctrl+Shift+B 버튼을 누를때 실행되도록 하고 싶다면 작업(T) > 기본 빌드 작업 구성(F) 메뉴를 선택한 후, 표시되는 목록에서 gulp: default 를 선택합니다. 최종 tasks.json 은 다음과 같은 형태가 될 것입니다.

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "gulp",
            "task": "default",
            "problemMatcher": [],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

4 단계: gulp 기본 작업 중단하기

gulp 기본 작업은 백그라운드에서 실행되며, Markdown 파일의 변경을 감시합니다. 만약 작업을 중단하기를 원한다면, 전역메뉴에서 작업(T) > 작업 종료(T) 를 사용하여 실행중인 작업을 종료할 수 있습니다.