고민했던 부분
번들링 도구를 통해 스타터를 만들 때 고민했던 부분이 하단과 같다. webpack은 처음 해보는거고 접하지도 않았어서 러닝커브가 있고, gulp는 구축 프로젝트 할 때 직접 만들지는 않고, 써봤다는 정도였다. 더불어, 참고할 파일도 있었다. 그런 부분들과 차이점이 gulp로 스타터를 만들도록 이끌어주었다. 다시 쓸 일이 있을까 싶지만, 나중에 누군가 gulp로 스타터를 만든다면 도움이 될 수 있겠지?하고 남겨둔다.
webpack과 gulp의 차이점
Webpack | gulp |
---|
속도가 빠름 | 속도가 느림 |
초기셋팅 오래 걸림 | 기존파일 재구성하여 학습시간이 비교적 적게 소요됨 즉, 초기셋팅 빨리할 수 있음 |
function과 task의 차이점
function | task |
---|
재사용 가능한 모듈느낌 | function들을 활용하여 만든 하나의 울타리 같은 느낌 |
변수로 받아서 이 작업 하나로 중복작업 피할 수 있음 | 하나의 태스크에서 직렬 혹은 병렬로 function들을 순서대로 묶어주는 역할 |
| cmd에서 gulp taks명 이런 식으로 입력 가능함 |
transpile과 compile의 차이점
transpile | compile |
---|
한 형식에서 다른 형식으로 모듈 전송 | 한 언어로 작성된 코드를 다른 언어로 변환 |
gulp4.0에서 gulp.series와 gulp.parallel의 차이점
gulp.series | gulp.parallel |
---|
하나하나씩 순서대로 실행(직렬) | 동시에 실행(병렬) |
태스크명이나 함수들을 가져와서 반환함 | |
실행된 함수가 반환될 때, series함수 내에서 실행될 태스크나 함수는 이전에 실행된 함수나 태스크가 끝나길 기다리고 있다. error 발생시 실행은 멈춘다. | |
자주쓰는 플러그인 종류
gulp
: gulpfile.js를 제작할 수 있도록 초기에 깔아줘야함
browsersync
: 웹서버 띄워서 소스 전환되는 거 바로보기
cssnano
: CSS파일 경량화 및 난독화
del
: 파일 및 폴더 삭제
imagemin
: 이미지 크기를 줄여줌
newer
: 최신 파일을 sorting해주는 플러그인
sass
: CSS 파일 전처리기
uglify.js
: javascript 파일 경량화, 분석, 난독화
file-type
: 파일 유형체크
gulp-eslint
: 문법 오류 잡아줌
babel
: js 폴리필
ssi
: 브라우저 싱크에서 서버사이드 인클루드 할 수 있게 해 줌
걸프에 관한 이야기
package-lock.json
은 종속된 디펜던시들이 업데이트될 경우, 다른 개발자가 npm install
을 할 경우 다른 node_modules
트리를 만드는 것을 방지하기 위해서 그 내역이 기록돼있는 데이터 모음을 말한다. package.json
과 꼭 함께 커밋해야 다른 환경에 있는 사람들도 동일한 노드모듈 트리를 갖는다.
폴더구조 짤 때 생각할 부분
- depth가 너무 깊으면 안됨, 왜냐하면 URL이 길어지고 복잡해짐
- 같은 성격의 아이들끼리 그룹화가 잘 돼있어야 함
- 후발주자가 일을 파악해도 어려움이 없도록 직관적이어야 함