Node JS 리얼타임게임 수업 노트: Gulp

이 노트는 Nomad Coder 수업 내용에 기반합니다. 

아래 글은 아직 수정중이라 참고가 어려울 수도 있습니다.

빌드 프로세스 설정하기

 

#3.1-3.2 Gulp 연결

Why Gulp?

- 웹펙의 개똥같은 설정 어려움 그만 겪자!

- Static에서 import나 export 해야하는데 프론트 자바스크립트에는 이런게 존재하지 않는다. 

**static : 유저에게 보내지는 file (e.g. : 이미지, css, client side JS)

 

1. gulpfile.babel.js 파일 프로젝트 디렉토리 내부에 만들기 

*gulpfile.js가 아닌 이유? 

해당 파일 내에서 require가 아닌 ECMA6 에서 쓰는 import를 쓰고 싶기때문~

gulp가 자동으로 babelrc 파일을 찾아서 babel 설정대로 이 파일을 코딩할 수 있게 해줌. 

 

2. Sass 쓸 준비

assets/scss/styles.scss 만들기.

(Gulp가 이 파일 찾아서 static 폴더 내의 css 파일로 넣어줄것이다.)

 

3. home.pug style sheet 더하기

 

4. gulp와 gulp-sass 설치

npm install gulp

npm install gul-sass node-sass (node-sass 같이 설치해야함)

 

5. gulp.babel.js 설정

 

6. package.json에 build script 넣어주기

gulp styles에서 styles는 아까 gulfile에서 지정해준 function 이름. 

 

7. npm build:styles

 

8. gulp-autoprefixer

css 변환시 브라우저 호환성 맞게 prefix 자동으로 붙여줌.

9. gulp-csso 설치

10. Gulp가 계속 파일 시스템 지켜보다가, 변화시 자동으로 style 함수 실행하도록하기.

package.json 스크립트 수정해주는것도 잊지 말자. dev:assets: "gulp"

 

11. 테스트

npm run dev:server

npm run dev:assets

 

#3.2 Browserify 넣기

 

1. del 설치

플랫폼 상관없이 폴더 지우기 위한 방법. 

npm install del

2. 유의사항

watch실행시 각 함수 return 필요. 실수 안하도록 arrow function으로 바꾸자.

3. browserify 설치 npm install gulp-browserify

 

#3.3 Babelify 더하기.

Browserify와 Babelify 사용하는 이유

프로그래밍에서는 관리의 용이성을 위해 코드를 모듈화하여 작게 나눈후, 나중에 하나로 묶어서 실행한다. Node.js의 경우, require method를 사용해서 하나로 파일을 실행한다. 근데 브라우저는 이 require를 지원하지 않는데, 이를 가능하게 하는 것이 Browserify이다. 근데 사람의 욕심은 끝이 없어서 require가 아닌 ES6의 import를 쓰고 싶어한다. Babelify는 이를 돕기 위해 등장. ES6를 ES5로 compile한다. 

참고: James H Kelly의 

https://www.quora.com/What-exactly-do-the-tools-Browserify-and-Babelify-actually-do-eg-in-conjunction-with-gulp4

What exactly do the tools Browserify and Babelify actually do (eg in conjunction with gulp)?