프론트엔드 자동화 시스템 그런트

[책 소개]

이 책은 HTML, CSS 등을 전혀 몰라도 사용할 수 있지만 많은 어려움이 있습니다. 완전초보자용이 아닌 어느 정도 HTML, CSS, JAVASCRIPT 등을 알고 있는 대상자를 위한 책입니다.

현재의 환경에서 좀 더 나은 환경을 구축하고자 하는 분, 현재보다 더 빨리 코드를 만들고 싶은 분, 코드의 품질을 높여 오류없는 코드를 만들고 싶은 분들이 대상이 됩니다.



코드를 다루기 때문에 인기 있는 서브라임텍스트의 사용법을 추가하였습니다.



1장은 서브라임텍스트라는 에디터의 사용법을 다룹니다.

서브라임텍스트가 아니더라도 Grunt를 사용하는 데는 아무 문제가 없습니다. 하지만 좀 더 좋은 기능을 가지고 있는 서브라임텍스트를 소개합니다.



2장은 버전 관리를 할 수 있는 Github 에 대해서 간단하게 설명합니다.

Github 하나만 가지고도 상당이 많은 분량이 필요하기 때문에 여기서는 간단하게 사용할 수 있는 부분만 다룹니다.



3장은 플러그인 패키지 관리자인 Bower에 대한 소개입니다.

플러그인을 설치하고 내가 사용하고자 하는 패키지를 업로드 하는 부분과 API에 대해서 설명합니다.



4장은 자동화도구인 Grunt에 대한 설명입니다.

자동화가 돌아갈 수 있는 전체적인 설명과 소스코드를 포함하였고 각 부분에 대한 상세한 설명이 들어있습니다.



5장은 Grunt 고급 사용자 부분입니다.

매번 템플릿을 복사하지 않고, 다운로드 받아서 사용할 수 있는 부분이 설명되어 있습니다. 환경이 달라 나에 맞춘 환경을 구축하고 사용할 수 있는 전자동 템플릿에 대한 설명이 있습니다.



6장은 Bower, Grunt 를 포함하고 있는 자동화 패키지 관리자인 Yeoman 부분입니다.

Bower, Grunt를 알아야 Yeoman 을 사용할 수 있기에 나중에 설명하였고, Grunt로 빌드되는 angular.js 템플릿을 사용하는 부분을 설명하였고, Gulp로 빌드되는 부분을 간단 설명하였습니다.



이런 환경이 조금이라도 익숙한 사용자라면 4장과 5장 Grunt 만 봐도 바로 사용할 수 있으며, 소스코드가 포함되어 있어서 다운로드 받아서 사용할 수 있습니다. 모든 소스코드는 원격저장소인 github 에 모두 업로드 되어 있어서 아무나 사용할 수 있습니다.



책 예제 코드 저장소

- https://github.com/demun/grunt-start-1

- https://github.com/demun/grunt-start-2

- grunt-init 을 사용하기위한 템플릿 https://github.com/demun/init-tem

PART 01 Sublime Text



Chapter 01 Sublime Text 설치

Chapter 02 기본 설정

Chapter 03 프로젝트 관리

Chapter 04 스니펫

Chapter 05 Goto Anything

Chapter 06 패키지 관리 도구

Chapter 07 한글 입력문제 해결하는 방법

Chapter 08 한글 인코딩 문제

Chapter 09 사이드바 확장

Chapter 10 빠른 마크업 도구 Emmet

Chapter 11 코드 정렬 Alignment

Chapter 12 코드하이라이팅 도구Bracket Highlighter

Chapter 13 Color Highlighter

Chapter 14 테마



PART 02 Git



Chapter01 Github

Chapter 02 이메일 인증

Chapter 03 관리자 설정

Chapter 04 원격저장소 생성

Chapter 05 ssh-key 등록하기

Chapter 06 최초 설정

Chapter 07 로컬저장소 만들고 동기화시키기

Chapter 08 원격저장소 복제하기



PART 03 Bower



Chapter 01 Bower 소개

Chapter 02 Bower API

Chapter 03 .bowerrc 환경설정

Chapter 04 패키지 등록하기



PART 04 Grunt



Chapter 01 Grunt 소개

Chapter 02 그런트 경험해보기

Chapter 03 프로젝트 수행

Chapter 04 작업 설정 및 target(작업대상)

Chapter 05 작업순서

Chapter 06 html 작업 소개

Chapter 06-1 grunt-includes 플러그인 소개와 사용법

Chapter 06-2 grunt-contrib-htmlhint 플러그인 소개와 사용법

Chapter 06-3 htmlhint 규칙

Chapter 07 css task

Chapter 07-1 grunt-contrib-less 플러그인 소개와 사용법

Chapter 07-2 grunt-contrib-csslint 플러그인 소개와 사용법

Chapter 07-3 grunt-autoprefixer 플러그인 소개와 사용법

Chapter 07-4 grunt-csscomb 플러그인 소개와 사용법

Chapter 07-5 grunt-contrib-cssmin 플러그인 소개와 사용법

Chapter 08 javascript task

Chapter 08-1 grunt-contrib-jshint 플러그인 소개와 사용법

Chapter 08-2 grunt-contrib-concat 플러그인 소개와 사용법

Chapter 08-3 grunt-contrib-uglify 플러그인 소개와 사용법

Chapter 09 기타 작업 소개

Chapter 09-1 grunt-contrib-clean 플러그인 소개와 사용법

Chapter 09-2 grunt-contrib-copy 플러그인 소개와 사용법

Chapter 09-3 grunt-contrib-imagemin 플러그인 소개와 사용법

Chapter 10 실시간 동기화 작업 소개

Chapter 10-1 grunt-contrib-watch 플러그인 소개와 사용법

Chapter 10-2 grunt-contrib-connect 플러그인 소개와 사용법

Chapter 11 최적화 작업 소개

Chapter 11-1 time-grunt 플러그인 소개와 사용법

Chapter 11-2 load-grunt-tasks 플러그인 소개와 사용법

Chapter 11-3 grunt-concurrent 플러그인 소개와 사용법

Chapter 11-4 grunt-newer 플러그인 소개와 사용법

Chapter 12 작업등록 registerTask

Chapter 13 기타 플러그인

Chapter 14 grunt-start-2 템플릿



PART 05 템플릿



Chapter 01 그런트 템플릿 사용하기(grunt-init)

Chapter 02 사용자 정의 템플릿(init-tem)

Chapter 03 Grunt, Bower 등을 한 번에 설치하는 나만의 전자동 템플릿

Chapter 04 전자동 템플릿 2 374



PART 06 Yeoman



Chapter 01 Yeoman 388

Chapter 02 generator-angular 설치

Chapter 03 angular 설명

Chapter 04 generator-wepapp 설치

Chapter 05 webapp 설명

허종문 저자 허종문은 티스토리 블로그인 demun.tistory.com 이라는 블로그를 운영 중에 있으며, 티스토리 스킨을 제작하여 공유하고, 판매하기도 하였습니다.

웹퍼블리셔로 활동하고 있으며 대우증권, 나이스신용정보, SBI저축은행, 우리은행 등 대기업 및 금융권 프로젝트를 진행하였고, 모바일, 데스크탑, 반응형 등 다양한 형태의 홈페이지를 퍼블리싱을 하였습니다.



블로그: demun.tistory.com

커뮤니티: cafe.naver.com/webdemun

SNS: facebook.com/demunblog