Visual Studio에서 Semanti-UI 테마 적용

Visual Studio 2015에서 Semantic-UI를 사용하여 제공하고 있는 테마를 적용하는 방법입니다.

테마를 적용하기 위해서는 Node, Gulp가 필요합니다. (테마등 Semantic-UI 추가기능을 사용하지 않으시면 필요없습니다.)

1. Semantic-UI 테마 변경을 위한 기초 작업 (Node, Gulp, Semantic-UI 설치)
2. 테마 구조 및 설정 변경
3. 나만의 테마 만들기

Node, Gulp, Semantic-UI 설치

1. VS2015는 기본으로 Node가 설치되기 되고, 혹시 설치하지 않으신분은 Node 홈페이지에서 설치파일을 다운 받은 후 설치 합니다.
   Node, npm 설치 확인
   
2. VS2015에서 프로젝트 생성
3. CMD를 사용하여, 프로젝트가 설치된 폴더로 이동합니다.
   * VS 확장 도구 Open Command Line을 이용하시면 VS 프로젝트에서 마우스 오른쪽 버튼으로 바로 CMD를 실행할 수 있습니다.
4. Gulp 설치 (CMD창에서 입력)
   npm install gulp
5. Semantic-UI 설치 방법
   Semantic-UI 홈페이지 제공 비디오
   

Gulp, Semantic-UI 설정 파일 수정

1. Semantic-UI가 설치되어있는 폴더 (디폴트로 설치하셨으면 프로젝트 경로/Semantic)의 gulpfile.js를 복사하여 root에 붙여넣기 합니다.
2. root에 붙여넣기한 gulpfile.js의 내용 중 Set-up 의 경로 부분을 수정합니다.
   require('./tasks/...') > require('./semantic/tasks/....')
3. root/semantic.json
   
4. root/semantic/src/theme.config에서 @button: 'default' 부분을 기본으로 제공해주는 amazon 테마로 변경
   @button: 'amazon'
5. 위 진행 방법으로 모든 설정이 마무리 되었고 이제 VS에서 빌드만 하면 됩니다.

Visaul Studio 2015에서 Semantic-UI 빌드

1. Visual Studio 2015 메뉴 중 보기 > 다른 창 > 작업 러너 탐색기 클릭
2. 작업 러너 탐색기에서는 gulpfile에서 설정한 항목들이 표시됩니다.
   build 마우스 오른쪽 버튼 클릭 후 실행
   
3. root/semantic.json output에서 설정한 폴더로 .css, .js파일이 생성된걸 사용하시면 됩니다.