Gulp 사용법2016. 12. 5. 17:37

이미지 스프라이트 란 웹 사이트 성능 최적화 방법중 하나로 쓰이는 방법 중 하나 입니다.이것은 여러장의 이미지를 한장의 png 파일로 만들어서 그 이미지를 사용합니다.왜 이렇게 하냐면여러개의 이미지를 웹 사이트에서 보여주려고 하면 이미지의 갯수만큼 서버에 이미지를 요청하는 작업이 반복됩니다.여러번 이미지를 요청하는건 사이트 로딩을 더디게 만들죠. 또한 이미지 파일이 여러장인 것 보다 한장인게 용량이 더 적게 차지합니다. 어떤 이미지를 이미지 스프라이트 기법을 통해 만드느냐면대표적으로 메뉴 와 아이콘 등이 있습니다. 이런 스프라이트 이미지를 수작업으로 만들 수 있지만 이미지 사이의 간격 등 이런 귀찮고 번거로운 작업을 일일히 손으로 재가면서 하기엔 시간이 너무 많이 걸리는 작업입니다. 따라서 명령어 한번에..

Gulp 사용법2016. 10. 19. 18:54

gulp-webserver 는 gulp-connect와 거의 같은 기능을 합니다.http://recoveryman.tistory.com/292하지만 한가지가 더 좋았습니다. gulp 명령을 사용했을 시에진행중인 프로젝트의 웹 페이지를 바로 띄워 줍니다.브라우저 주소창에 localhost:포트번호

Gulp 사용법2016. 10. 19. 02:09

gulp-connect 는 웹서버를 띄우고 문서를 수정하고(예 : HTML) 저장할때 띄워져 있는 웹 페이지를 새로고침 할 수 있는 기능을 가지고 있습니다. 쉽게 말해서 브라켓의 실시간 미리보기 하는 동작을 수행할 수 있습니다. 누가 저한테 이걸 알려 준 것이 아니기 때문에 여러가지 옵션들을 유연하게 사용하는 법에 대해선 고민해보려 합니다. 일단 이 gulp-connect 설치와 사용 방법에 대해서 글을 작성하겠습니다. 1. 설치는 다음과 같습니다. 다만, 저는 경로를 D드라이브에 gulp를 셋팅하면서 사용하기에 드라이브를 이동하였습니다. C드라이브에 사용하신다면 드라이브 경로 변경은 하지 않으셔도 됩니다. 그 후, D드라이브 에 있는 gulpSetting 라는 폴더로 이동하였습니다. 그 자리에서 npm..

Gulp 사용법2016. 9. 23. 19:14

Sass가 무엇인지 그리고 어떻게 사용하는지에 대해서 포스팅을 진행했던 적이 있습니다. Sass(사스) 소개 및 설치http://recoveryman.tistory.com/276 Sass(사스) 사용법http://recoveryman.tistory.com/277 서브라임 텍스트에서 Sass 패키지 설치하기 (코드를 색으로 구분해서 오류를 최소화)http://recoveryman.tistory.com/278 이번엔 Gulp를 사용해서 Sass 컴파일을 진행해 보려 합니다. 근데.. Gulp를 이용해서 Sass 만 컴파일 하는거로 끝나면 Gulp를 사용 할 이유가 없다고 생각 됩니다.그래서, 맨 처음 Gulp의 설치하면서 진행했던 html include 를 Sass 컴파일 하면서 동시에 돌리려고 합니다.아니..

Gulp 사용법2016. 9. 20. 15:10

제목만 봐서는 뭔지 모르는 사람이 조금은 있을꺼라고 생각합니다.include 의 뜻이 포함하다. 라는 뜻입니다.그래서 뭘 포함하는데? 라고 분명히 의문을 가지실 분들이 계실꺼라고 생각됩니다. 저는 이걸 사용해서 자주 쓰이는 헤더와 푸터를 앞으로 만들 html페이지에 포함해 보려고 합니다. 페이지를 만들면 반복적으로 쓰이는 헤더와 푸터는 새로 만든 페이지 에서 똑같이 작성해 줘야합니다.그냥 그런 작업을 Gulp를 이용해서 해보면 어떨까 합니다. 1. 먼저 폴더 몇개와 index, header, footer 에 관한 html 파일을 몇개 만들어 둡니다.gulpSetting 이란 폴더에 app 이란 폴더를 만들고 app 이란 폴더 아래로 다음과 같이 폴더와 파일을 만들었습니다.이 부분은 본인의 작업 스타일에 ..

Gulp 사용법2016. 9. 20. 02:30

제가 혼자서만 공부하다보니 gulp를 실무서 어떻게 사용하는지 정확히 모릅니다. gulp를 사용하시는 분이 혹시 계시다면 꼭 저의 잘못된 점은 지적해 주셨으면 합니다. 무한 태클 환영합니다! Gulp(걸프)란 자동화 시스템 입니다. 컴파일 이란 부분도 이 자동화 시스템에 포함되어 있죠. 간단한 예로 Sass(사스)가 그렇습니다. scss 파일을 css 파일로 변환 시켜주는 부분을 컴파일 한다고 합니다. 컴파일 이란 소스 코드를 실행할 수 있는 실행 파일로 변환 하는 과정이고, 빌드 란 이 컴파일을 포함하는 더 큰 개념으로써, 소스의 컴파일을 포함해 어플리 케이션을 사용할 수 있는 형태로 만들어 주는 과정을 뜻합니다. Sass 뿐만 아니라 스크립트 오류를 검사하거나, html 태그를 include하거나, ..