11.GULP-Javascript 빌드 자동화툴(기본세팅)

소개

Node.js 환경에서 웹 어플리케이션을 만들다보면, 일일히 수작업으로 하기에 귀찮은 작업들이 존재한다.

예를들어서, ____.min.js, ____.min.css파일이 있다. whitespace, newline 과 같이 없어도 지장이 되지 않는 문자들을

제거함으로서 페이지 렌더링 성능도 (비록 큰 차이는 아니지만) 를 늘리고 트래픽도 많이 아낄 수 있다.

jQuery 2.1.3 버전의 경우 uncompressed 와 minified 의 파일 사이즈가 159KB 차이가 나고.

하루 방문자가 1000명이라면, 155MB 의 트래픽을 아낄 수 있다. 그만큼 중요한 file minification 작업을 js 와 css를 수정 할 때마다 수동으로 실행해야 한다면. 귀찮을 수 밖에 없다

다른 귀찮음의 예로는, Node.js 프로젝트를 작성하면서 .js 파일을 수정 할 때마다 서버를 재시작 해야했다.

개발자들의 이런 귀차니즘을 해결하기 위한 도구가 바로 gulp.js 다. 위에 설명 된 것 외에도 많은 작업들을 다 자동으로 해준다.

 

설치하기

1.Gulp전역(Global)설치

$ sudo npm install -g gulp

 

도중에  graceful-fs 와 lodash 에 관한 경고가 뜨면, 최신버전으로 설치해주자.

sudo npm install -g graceful-fs lodash 
/usr/local/lib 
├── graceful-fs@4.1.3 
└── lodash@4.11.2

 

2.프로젝트 폴더에서 npm init

$ npm init

 

3.gulp와 gulp-util 를 devDependencies 로 모듈 설치

(gulp-util 은 gulp에서 로그를 쉽게 기록 할 수 있게 해준다)

$ npm install -save-dev gulp gulp-util

 

4. babel-core 와 babel-preset-es2015 를  devDependencies 로 모듈 설치

$ npm install --save-dev babel-core babel-preset-es2015

위 모듈들은 gulp에서 ES6 를 사용 할 때 필요한 모듈들이다.

 

5. .babelrc 파일 생성

{
  "presets": ["es2015"]
}

스크립트를 변환해주는 모듈인 babel 의 설정이다.
ES6 문법을 사용하겠다는 의미다.

 

6. gulpfile.babel.js 작성

'use strict';

import gulp from 'gulp';
import gutil from 'gulp-util';

gulp.task('default', () => {
    return gutil.log('Gulp is running');
});

gulpfile 은 gulp 에서 어떤 작업들을 할 지 정의해준다.

 

'use strict';는 JavaScript 코드의 안정성을 위하여 문법검사를 더 확실하게 하겠다는 의미다. 자세한 내용은 “자바스크립트에서 strict mode를 사용해야 하는 이유”를 참고하자.

gulp 실행

기본 설정 완료

$ gulp  [03:18:18] Requiring external module babel-register  [03:18:19] Using gulpfile ~/node_tutorial/gulp-es6-webpack/gulpfile.babel.js  [03:18:19] Starting 'default'...  [03:18:19] Gulp is running  [03:18:19] Finished 'default' after 7.57 ms