Github 블로그 만들기(3) - 로컬호스트에서 파일 변경사항 즉시 적용하기

• 로컬호스트에서 변경사항 즉시 적용하기.
  • 1. node 설치 후 gulp 설치
  • 2. gulp 설치
  • 3. 블로그 디렉토리로 진입
  • 4. node module들의 설치를 위해 필요한 package.json 생성
  • 5. 필요한 세 가지 모듈 설치
  • 6. 블로그 디렉토리에 gulpfile.js 파일을 생성하고 아래와 같이 입력합니다.
  • 7. 마지막으로 처리해주어야 할 부분

로컬호스트에서 변경사항 즉시 적용하기.

1. node 설치 후 gulp 설치

1) node 설치 후 node 다운로드 링크로 가서 자신의 OS에 맞게 설치
2) node -v로 설치 확인

2. gulp 설치

1) cmd 창에서 npm install gulp-cli -g를 입력하여 gulp 설치 후
2) gulp -v로 설치 확인

3. 블로그 디렉토리로 진입

• cd 명령으로 블로그 디렉토리로 진입
  ex) C:\Users\Ryu>cd Desktop
  C:\Users\Ryu\Desktop>cd ryureka.github.io
  C:\Users\Ryu\Desktop\ryureka.github.io>

4. node module들의 설치를 위해 필요한 package.json 생성

• npm init 명령을 통해 앞으로 설치될 node 모듈을 관리하는 package.json파일을 생성합니다.
  
• [package name 이 나올텐데 엔터를 눌러 넘어갑니다. 나머지들도 자동으로 설정되도록 마찬가지로 계속 엔터를 눌러 넘어갑니다.

• 아래와 같이 package.json 생성 전 마지막으로 확인하는데 엔터를 눌러 package.json 파일을 생성합니다.

• 이제 package.json 파일이 생성되어 디렉토리 내에 node 모듈을 설치할 수 있습니다.

5. 필요한 세 가지 모듈 설치

• 아래의 세가지 명령어를 실행하여 필요한 gulp, gulp-shell, browser-sync를 설치합니다.

  > npm i gulp --save-dev  
  > npm install browser-sync --save-dev  
  > npm install gulp-shell --save-dev  
  

여기서 –save-dev 명령은 개발할 때만 쓰겠다는 것입니다. 배포할 때는 쓰지 않겠다는 옵션입니다.
모듈 설치 시 npm 뒤의 install은 줄여서 i로 써도 무방합니다.

6. 블로그 디렉토리에 gulpfile.js 파일을 생성하고 아래와 같이 입력합니다.

https://comsiro.github.io/etc/2017/06/10/JekyllInstallation4.html에 가셔서 ‘Jekyll을 위한 Gulp’ 아래 부분의 스크립트 코드를 복사하여 저장해주시되 마지막 gulp.taskgulp.task(‘default’, [‘build’, ‘serve’]); 부분만 아래의 코드로 바꿔서 저장해줍니다. (gulp 버전이 달라짐에 따라 문법이 조금 변경된 것 같습니다.)

gulp.task('default', gulp.parallel('build', 'serve'));

• _config.yml의 url 부분의 localhost:4000에서 포트번호 4000을 3000으로 변경한 이후에 gulp 명령을 실행합니다. 소스코드를 변경 후 저장하면 아래와 같이 변경사항이 즉시 적용되는 모습을 확인할 수 있습니다. 종료하고 싶을 때는 ctrl+c 키를 눌러줍니다. (종료가 안되고 y/n를 물어볼 경우 종료될 때까지 y와 엔터를 입력해줍니다.)
  - gulp 명령 실행

- 브라우저에 수정사항이 자동으로 반영되는 모습

7. 마지막으로 처리해주어야 할 부분

• 개발할 때는 로컬호스트에서 개발할 것이므로 _config.yml 파일의 url 부분을 localhost:3000으로 하여 개발합니다. 그리고 원격 GitHub 저장소에 로컬에서만 필요한 node_modules가 올라가지 않도록 .gitignore파일에 node_modules를 추가해줍니다.
• 개발이 끝나고 GitHub에 올릴 경우에는 _config.yml 파일의 url 부분을 다시 원래의 블로그 주소(예를 들면 https://username.github.io)로 다시 수정하거나 git reset head _config.yml 명령으로 스테이징 목록에서 제외하고 원격저장소에 올려야 합니다.
• _config.yml 파일의 변경사항을 깃이 추적하지 않도록 하고 싶다면 아래의 명령을 입력합니다. 이 명령은 git에게 _config.yml 파일에 대한 변경 사항을 무시하고 싶다고 알려줍니다.

  git update-index --assume-unchanged _config.yml
  

  반대로 _config.yml 파일의 변경사항이 생겨 다시 git으로 추적하고 싶을 때는 아래의 명령을 입력하여 주면 됩니다.

  git update-index --no-assume-unchanged _config.yml
  

• 포스팅하는데 쓰이는 마크다운(.md) 파일을 수정할 때마다 자동으로 새로고침 해주어 편하게 개발할 수 있습니다.
• 마크다운(.md) 파일이 아닌 다른 파일을 수정했는데 변경사항이 브라우저에 바로 반영이 안되면 콘솔창에서 ctrl + c 로 실행을 중지한 후 gulp 명령을 다시 실행해야합니다.