Gulp란?
- 웹서버 운영, 설치에 사용되는 빌드툴 걸프(Gulp)
- 자바스크립트에서 반복적이고 자주 사용되는 일은 자동화해주는 매우 유용한 툴로 빌드시스템 (프론트엔드 워크플로우 자동화)
- 이를 사용하면 시간을 줄일 수 있고 생산성 향상에 큰 도움이 되므로 프로젝트 진행시 많이 사용
Grunt또는 Webpack 비교되는 툴
Gulp의 용도
- 자바스크립트 라이브러리, 서드파티 앱등을 모으고 축소, 압축을 수행
- 단위 테스트(Unit Test) 수행
- LESS / CSS 컴파일링
- 브라우저 Refresh를 도와줌
CSS 처리
모든 SCSS를 CSS로 컴파일. 캐쉬를 이용해 더 빠르게 처리하죠
브라우저 지원을 위해 자동 접두사(auto-prefies)를 추가
편리한 디버깅을 위한 목적으로 CSS 소스맵을 생성
사용하는 써드파티 모듈/패키지로부터 CSS를 가져옴
CSS를 하나로 합치고 최소화
웹사이트를 위해 CriticalCSS를 생성
Fontello를 통해 사용하는 glyphs만을 통해 커스텀 아이콘 글꼴을 생성
하나의 소스 이미지로부터 웹사이트를 위한 다양한 파비콘(그리고 HTML 코드)을 생성
자바스크립트 처리
ES6로 작성한 모든 자바스크립트를 브라우져 지원을 위해 트랜스파일.
써드파티 모듈/패키지로부터 자바스크립트를 가져옴
자바스크립트 난독화
HTML별로 인라인해야할 자바스크립트를 가져옴
라이브 리로딩 처리
CSS/SCSS가 변경되면 곧장 브라우져는 페이지 로드 없이 화면을 다시 그림
자바스크립트가 변경되면 브라우져가 페이지를 다시 로딩
Twig/HTML 템플릿이 변경되면 브라우져는 페이지를 다시 로딩
웹 접근성 검사
무손실 압축
imagemin을 통해 웹사이트에서 사용하는 이미지를 무손실 압축
기본 설치 및 사용/활용
https://gulpjs.com/docs/en/getting-started/quick-start/
https://valuefactory.tistory.com/314
https://velog.io/@leyuri/gulp%EB%9E%80
https://github.com/FEDevelopers/tech.description/wiki/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%9D%84-%EC%9C%84%ED%95%9C-Gulp
https://recoveryman.tistory.com/285?category=652407
https://equality37.tistory.com/25?category=873355
https://brunch.co.kr/@kmongdev/5
https://brunch.co.kr/@timotolkie/19
https://maybe-b50.tistory.com/26
gulpfile 셋팅 Plugin 목록
플러그인은 로컬 devDependency 에 설치하는 것이 좋다.
gulp-file-include : 파일을 include 할 수 있는 플러그인 (필터, IF/FOR문 등도 가능)
HTML 파일을 Header, Content, Footer 영역으로 쪼개어 사용할 수 있습니다.
gulp-sass : scss 파일을 css로 컴파일 해주는 플러그인
gulp-autoprefixer : vendor-prefixed CSS 속성을 자동으로 추가해줌.
gulp-minify-css: CSS의 코드를 압축 시켜줌.
gulp-concat : 하나의 파일로 합쳐줌 (여러 개로 나눈 scss 파일을 합칠 때 사용함)
gulp-rename : 파일명을 변경 시켜주는 것인데, gulp-concat 에서도 파일명을 지정할 수 있어서 처음에만 사용해보았다.
gulp-rename : 파일명을 변경 시켜주는 것인데, gulp-concat 에서도 파일명을 지정할 수 있어서 처음에만 사용해보았다.
gulp-babel : ES6 문법을 ES5로 트랜스 컴파일 시켜줌.
gulp-jshint : Javascript 소스 코드의 코딩 규칙을 준수 하는 지 확인할 수 있는 플러그인.
코드의 문법오류, 잠재적인 문제를 검출하고, 코딩 가이드를 준수할 수 있도록 도와준다.
gulp-minify : Javascript 코드를 압축 시켜줌
gulp.spritesmith: 자동으로 sprite 이미지와 좌표값 및 관련 이미지 정보 값을 추출해줌.
옵션 값을 SCSS로 변경하면 디테일한 값들을 가져올 수 있다.
merge-stream: 이미지 sprite화 시킬 때 img 경로와 css 경로를 따로 설정하기 위해 사용.
gulp 에서는 파일끼리 결합 시킬 때 사용함.
browser-sync: 로컬에서 작업한 파일을 웹서버로 띄워 실시간 수정을 확인할 수 있음.
수정한 파일을 자동 감지해서 브라우저 Refresh를 수행시켜줌.
gulp 의 플러그인 기능 중 하나가 아닌 gulp와 같은 node.js 기반 어플리케이션임.
gulp-cached: 처리한 파일을 저장해두었다가, 다음에 시도하면 변경된 파일만 체크하여 스트림으로 통과 시키게 해줌 => 시간과 자원을 절약함
뭐가 문제였는 지 모르겠는데, 해당 플러그인을 사용하면 Gulp가 제대로 돌아가지 않아서 추후에 빼버림.
gulp-plumber: gulp 스트림에 문제가 있을 경우 파이프를 해제하고 상세 에러 처리를 가능하게 만들어주는 플러그인.
gulp-notify: gulp 오류 처리 할 때 메세지로 보여줄 수 있음. gulp-plumber 플러그인과 같이 사용.
watch: 변경된 파일을 감지한다.
