2017 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
Gulp – 플러그인 설치 및 사용하기

gulpfile.js 를 열고 이제 자동화 설정 셋팅을 해보자.
내가 하려는 자동화 작업은 이렇다.

  • js는 js폴더에 작업한 여러개의 js를 합치고, 코드를 압축한다.
  • scss는 컴파일해서 css로 만들되 역시 코드를 압축해 놓는다.
  • html 파일은 그냥 개발폴더에 추가되거나 수정될 때 배포 폴더에 자동으로 수정된다.
  • localhost로 서버화 시켜서 웹브라우져에서 미리 보면서 작업하고 수정될 때마다 실시간 반영된다.
  • 이미지는 압축과정을 거쳐 배포 폴더에 저장된다.

gulp는 사용한다고 셋팅하기 전 플러그인을 설치해야한다.  설치할 플러그인 목록은 아래와 같다.

  • gulp-uglify : js 압축
  • gulp-concat : 파일 합치기
  • gulp-sass : scss 컴파일
  • gulp-minify-css : css 압축
  • gulp-connect : 서버화 시키기
  • gulp-imagemin : 이미지 압축
  • gulp-changed : 변경된 것만 캐치
  • del : 초기화

이렇게 설치할꺼고 아래처럼 입력한다.

npm install --save-dev gulp-uglify gulp-concat gulp-sass gulp-minify-css gulp-connect gulp-imagemin gulp-changed del

이렇게 한줄로 한꺼번에 전부 설치하려고 입력해도 되고,  npm install --save-dev gulp-uglify  한번  npm install --save-dev gulp-concat  이렇게 하나씩 설치해도 된다.

아무튼 위 그림처럼 입력하고 나면 프롬프트 창에 뭔가 열심히 지나갈 것이다.

이렇게 지나가고 나면 플러그인들이 설치가 완료된 것이다.

이제 gulpfile.js 열어서 셋팅을 작성해보자.

설치한 플러그인들을 변수로 선언했다.

개발 코드들은 dev 폴더안에 있고 각 js/scss/html/img 에 대한 경로와 파일을 지정했다.
그리고 public_html 폴더안에 컴파일, 압축 등 자동화 완료 후 저장시킬 경로를 지정했다.
개인적인 구조이기 때문에 본인의 스타일에 맞게 수정한다.

위 세개는 대표적으로 js / css / html에 관한 셋팅이다. 보면  ‘gulp_js’, ‘gulp_css’, ‘gulp_html’ 이라고 있는데 그냥 자기가 지정하는 작업 이름이다. 자유롭게 써라.

이제 서버화 시키고 실시간 수정 반영되게 셋팅하자.

root는 저~ 위에 폴더 위치 선언한 것이다.

이미지 압축을 하게 만들자.  이미지를 저장하게 되거나 수정하게 되면 자동으로 압축해서 배포 폴더의 images에 저장되게 한다.

이렇게 만들어 놓았으면 실시간으로 감지하게, 즉 scss 코드 수정하고 ctrl+s 누르면 자동으로 컴파일 되어 해당 위치에 저장되게 한다던지 하려면 watch라는 걸 넣는다.

이렇게 하면 js/css/html/img 가 자동으로 감지하여 배포폴더에 컴파일 또는 저장된다.

이제 셋팅이 끝났으니 자동화 실행시키면 된다.

그전에 자동화 실행하려는 것도 추가해야한다.

이렇게 한 뒤 cmd로 가서  gulp  라고 입력하자.

이렇게 나오면 이제 자동화가 되고 있는 것이다.

웹브라우저에 http://localhost:8001/ 를 접속하면 작업중인 프로젝트가 라이브되고 있을 것이다.

그러나 또한 작업하다보면 최종본이라는게 생기기 마련이다.
분명 작업되지 말아야할 파일이나 최종이 아닌 쓰레기 파일이 배포파일에 들어가 있을 수 있다.
그렇기 때문에 초기화한 뒤 배포파일을 생성하게 하는 것이다.

gulpfile.js 안에 초기화 하는 셋팅을 하자.

그리고 초기화 한 뒤 배포용 작업을 하게 설정하자.

이렇게 해놓고 나중에 최종 산출물을 만들 때 cmd에  gulp dev  입력하면 된다.
배포용 폴더안의 내용이 싹 지워지고 새로 컴파일 및 압축해서 배포용 폴더에 작업해준다.

끝.

HoldHolic

nain

이메일 : nis@naminsik.com

리뉴얼하려고 생각한지가 어느덧 3년이 지났다. ㅠ 망...
.