Gulp

걸프(Gulp)란?
프론트엔드 작업을 빠르게 수행할 수 있도록 도와주는 워크 플로우 자동화 도구.
웹사이트 개발이 점점 복잡해지는 만큼, 프론트엔드 워크플로우 자동화 도구는 필수적이다.

걸프가 할 수 있는 일은?

• CSS 처리
  모든 SCSS를 CSS로 컴파일한다. 캐쉬를 이용해 더 빠르게 처리한다.
  브라우저 지원을 위해 자동 접두사를 추가한다. (크로스 브라우징을 말하는 듯)
  편리한 디버깅을 위해 CSS 소스맵을 생성한다. (ctrl + css 구문을 누르면 해당 라인으로 이동)
  사용하는 써드파티 모듈/패키지로부터 CSS를 가져온다.
  CSS를 하나로 합치고 최소화한다.

• 자바스크립트 처리
  ES6로 작성한 모든 자바스크립트를 브라우저 지원을 위해 변환한다.
  써드파티 모듈/패키지로부터 자바스크립트를 가져온다.
  자바스크립트 난독화
  HTML별로 인라인해야 할 자바스크립트를 가져온다.

• 라이브 리로딩 처리
  CSS/SCSS가 변경되면 브라우저는 페이지 로드 없이 화면을 다시 그린다.
  자바스크립트가 변경되면 브라우저가 페이지를 다시 로딩한다.
  Twig/HTML 템플릿이 변경되면 브라우저가 페이지를 다시 로딩한다.

• 웹사이트를 위해 CriticalCSS를 생성한다. (사용자에게 가능한 한 빨리 콘텐츠를 렌더링하기 위해 스크롤없이 볼 수 있는 콘텐츠에 대한 CSS를 추출하는 기술)

• 웹 접근성 검사

• Fontello를 통해 사용하는 glyphs만을 통해 커스텀 아이콘 글꼴 생성

• 하나의 소스 이미지로부터 웹사이트를 위한 다양한 파비콘과 HTML코드를 생성

• imagemin을 통해 웹사이트에서 사용하는 이미지를 무손실 압축