WordPress + SASS + Grunt

WordPress
WampServer + WordPress + SASS + Grunt + git

작업환경: Win7, Wamp, Bracket

준비과정
<개발환경 준비물>
1. 로컬호스트 환경 (Wamp)
2. 워드프레스 (Underscores theme 사용)
3. 코드 에디터 (bracket)
4. 브라우저와 개발자툴
5. 버전 컨트롤 프로그램 (git)

순서
1. Ruby 설치 후 SASS 설치
2. Node.js 설치 후 Grunt.js 설치
3. WampServer 설치 (wamp서버 start 후 WordPress 설치하기)
    - 설치버전: WAMPSERVER (32 BITS & PHP 5.5) 2.5
4. WordPress 설치 및 Theme 설정
5. Git 설정
6. grunt 설정

< SASS 설치하기>
- Sass를 설치하기 위해서는 Ruby가 필요하다.

1. 윈도우용 루비설치 (version: Ruby 2.3.0)
- 크롬에서 다운로드 하면 안될수도 있으므로 다른 브라우저에서 다운로드 하기
루비 공식 사이트: http://rubyinstaller.org/downloads/

*add Ruby executables to your PATH 꼭 선택해주기
-> pc 아무곳에서나 루비를 사용할 수 있도록 하기 위해서

*루비가 잘 설치 되었는지 확인방법:
실행(윈도우키+R) > cmd > ruby -v > 엔터 > 버전정보가 나오면 잘 설치한것

2. Sass 설치 (version: sass-3.4.22)
실행(윈도우키+R) > cmd > gem install sass > 엔터


추가 사이트:
prefix 확인: http://bourbon.io/

작동순서
.scss 작성 > SASS > .css로 변환> Autoprefixer > .css 완성



< Grunt.js 설치하기>
- Grunt.js 를 설치하기 위해서는 Node.js 가 필요하다.
1. Node.js 설치
2. Grunt.js 설치 (version: grunt-cli@1.2.0)
실행(윈도우키+R) > cmd > npm install -g grunt-cli > 엔터
* -g (global)를 쓰면,pc 아무곳에서나 grunt를 사용할 수 있다


< 로컬 호스트 환경 구축하기>
WampServer 사이트:  http://www.wampserver.com/en/

Wamp설치
WAMPSERVER (32 BITS & PHP 5.6.15) 3 
Apache : 2.4.17 MySQL : 5.7.9 PHP : 5.6.15

다운로드 > 실행 > 기본 브라우저와 코드에디터 설정 > Wamp 실행

*Wamp 실행중 에러 : code 740 error
해결: C:\wamp\wampmanager.exe 파일을 오른쪽 마우스눌러 관리자 권한으로 실행해주면 됨


< 워드프레스 설치 및 테마 설정 >


1. WordPress설치
<순서>
1. PHP Admin데이터 베이스 생성
2. WordPress 다운로드한 후 로컬 호스트에 압축 풀어 설치 후
어드민 계정 설정(http://localhost/프로젝트명/wp-admin/)

2. WordPress 테마 (Underscores) 설정
1. 테마를 만들기 위해, Theme Unit Test 더미 데이터 다운로드
다운로드: https://codex.wordpress.org/Theme_Unit_Test
참고사이트: http://triki.net/wordpress-theme-unit-test-sample-data-setup-151123

http://localhost/프로젝트명/wp-admin/import.php (Tools > Import) 에서
WordPress 선택 > 파일선택 (다운로드 파일) > 파일 업로드 
-> visit site 해보면, 임의 글들이 작성되어 있는것을 확인 할 수 있다.

2. Theme 설치 -> Underscores
다운로드: http://underscores.me/

Advanced Options 누르고,

필드를 알맞게 입력후, _sassify!체크 박스 체크 후 Generate

파일이 다운로드 되면, 
C:\wamp\www\프로젝트명\wp-content\themes 
에다가 압축 풀어 넣어준 후,
http://localhost/프로젝트명/wp-admin/themes.php (Appearance > Themes)
에서 Activate 해주기.


< git 설정하기>
1.git bash 에서, C:\wamp\www\프로젝트명\wp-content\themes\underscoresass 으로 이동
2. git init
3. gitignore 파일 작성
    * sass 와 grunt 사용할때는 아래 내용을 꼭 삽입해 주어야 한다.
    node_modules    .npm-degug.log    tmp    .sass-cache    *.css.map

4. git폴더 안에 gitignore 파일 넣은 후 git add *
5. git commit -m "메세지"

< grunt 설정하기>
1. ctrl+r 에서 C:\wamp\www\프로젝트명\wp-content\themes\underscoresass 으로 이동
2. npm init 
3. 설정
4. underscoresass 안에 package.json 생성됨 > 수정
5. 모듈 설치 (sass, watch, autoprefixeer)
    npm install grunt-contrib-sass --save-dev
    npm install grunt-contrib-watch --save-dev
    npm install grunt-autoprefixer --save-dev