[gulp] 만들면서 필요한 정보

0후·2020년 11월 13일
0

프론트엔드

목록 보기
7/41

고민했던 부분

번들링 도구를 통해 스타터를 만들 때 고민했던 부분이 하단과 같다. webpack은 처음 해보는거고 접하지도 않았어서 러닝커브가 있고, gulp는 구축 프로젝트 할 때 직접 만들지는 않고, 써봤다는 정도였다. 더불어, 참고할 파일도 있었다. 그런 부분들과 차이점이 gulp로 스타터를 만들도록 이끌어주었다. 다시 쓸 일이 있을까 싶지만, 나중에 누군가 gulp로 스타터를 만든다면 도움이 될 수 있겠지?하고 남겨둔다.

webpack과 gulp의 차이점

Webpackgulp
속도가 빠름속도가 느림
초기셋팅 오래 걸림기존파일 재구성하여 학습시간이 비교적 적게 소요됨 즉, 초기셋팅 빨리할 수 있음

function과 task의 차이점

functiontask
재사용 가능한 모듈느낌function들을 활용하여 만든 하나의 울타리 같은 느낌
변수로 받아서 이 작업 하나로 중복작업 피할 수 있음하나의 태스크에서 직렬 혹은 병렬로 function들을 순서대로 묶어주는 역할
cmd에서 gulp taks명 이런 식으로 입력 가능함

transpile과 compile의 차이점

transpilecompile
한 형식에서 다른 형식으로 모듈 전송한 언어로 작성된 코드를 다른 언어로 변환

gulp4.0에서 gulp.series와 gulp.parallel의 차이점

gulp.seriesgulp.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과 꼭 함께 커밋해야 다른 환경에 있는 사람들도 동일한 노드모듈 트리를 갖는다.

폴더구조 짤 때 생각할 부분

  1. depth가 너무 깊으면 안됨, 왜냐하면 URL이 길어지고 복잡해짐
  2. 같은 성격의 아이들끼리 그룹화가 잘 돼있어야 함
  3. 후발주자가 일을 파악해도 어려움이 없도록 직관적이어야 함
profile
휘발방지

0개의 댓글