[Gulp] 시작하기 - 버전 3

///// Nodejs (노드제이에스)

HTML, CSS, JS는 웹서비스의 핵심요소들이다.

이것들은 컴파일이 필요없지만,

파일을 최적화하고 생산성있게 개발할 수 있게 도와주는 도구들이 있다.

바로 Nodejs기반의 빌드툴 Grunt와 Gulp가 있다.

개인적으로는 Gulp가 더욱 보고 이해하기 쉬운 형태인 것 같아서 맘에 든다.

이 포스트에서는 Gulp에 대해 간단한 사용예를 적어 보았다.

※ Gulp 3에 도움이 될 수 있는 예제입니다.  

※ Gulp 4부터는 스크립트 작성이 다른 부분이 있습니다. 혼동을 피하기 위해 다른 도움글을 찾아보실 것을 권장합니다.

///// Gulp 3(걸프) 

1. 설치

1) 글로벌 설치

npm install -g gulp

2) 로컬에 설치 (프로젝트 루트로 이동하여 설치)

npm install --save-dev gulp

2. 플러그인 설치 (프로젝트 루트로 이동하여 필요한 플러그인 설치)

npm install --save-dev del gulp-rename gulp-jshint gulp-concat gulp-uglify gulp-csslint gulp-concat-css gulp-uglifycss gulp-minify-html gulp-livereload 

3. gulpfile.js 생성 예제

// 플러그인 로드

var gulp = require('gulp');

var del = require('del');

var rename = require('gulp-rename');

var jshint = require('gulp-jshint');

var concat = require('gulp-concat');

var uglify = require('gulp-uglify');

var csslint = require('gulp-csslint');

var concatcss = require('gulp-concat-css');

var uglifycss = require('gulp-uglifycss');

var minifyhtml = require('gulp-minify-html');

var livereload = require('gulp-livereload');

// 변수 지정

var src = 'public/src';

var dest = 'public/dist';

var jsFileNm = 'js.js';

var cssFileNm = 'css.css';

var fileSuffix = '.min';

var paths = {

"src":{

"js" : src + '/js/**/*.js',

"css" : src + '/css/**/*.css',

"res" : src + '/res/*',

"html": src + '/**/*.html'

},

"dest":{

"js" : dest + '/js',

"css" : dest + '/css',

"res" : dest + '/res',

"html": dest + '/'

}

};

//clean 작업 설정

gulp.task('clean', function(){

del([dest]);

});

//js 작업 설정

gulp.task('js', function(){

return gulp.src(paths.src.js)

.pipe(jshint())

.pipe(jshint.reporter('default'))

.pipe(concat(jsFileNm))

.pipe(stripDebug())

.pipe(uglify())

.pipe(rename({suffix:fileSuffix}))

.pipe(gulp.dest(paths.dest.js));

});

//css 작업 설정

gulp.task('css', function(){

return gulp.src(paths.src.css)

.pipe(csslint())

.pipe(csslint.reporter())

.pipe(concatcss(cssFileNm))

.pipe(uglifycss())

.pipe(rename({suffix:fileSuffix}))

.pipe(gulp.dest(paths.dest.css))

});

//res 작업 설정

gulp.task('res', function(){

return gulp.src(paths.src.res)

.pipe(gulp.dest(paths.dest.res))

});

//html 작업 설정

gulp.task('html', function(){

return gulp.src(paths.src.html)

.pipe(minifyhtml())

.pipe(gulp.dest(paths.dest.html))

});

//server 작업 설정

gulp.task('server', function(){

return gulp.src(dest + '/')

.pipe(webserver());

});

//watch 작업 설정

gulp.task('watch', function () {

livereload.listen();

gulp.watch(paths.src.js, ['js']);

gulp.watch(paths.src.css, ['css']);

gulp.watch(paths.src.html, ['html']);

gulp.watch(dest + '/**').on('change', livereload.changed);

});

gulp.task('default', ['server', 'js', 'css', 'html', 'watch']);

gulp.task('dev', ['clean', 'js', 'css', 'html', 'watch']);

4. 실행 (프로젝트 루트에 위의 gulpfile.js를 생성 후 명령)

- 명령

gulp js

* js라는 이름으로 정의된 task가 실행된다.

- 결과

1) public/src/js의 모든 js파일 오류 검사

2) 1)의 오류 검사 내역 출력

3) 파일 합치기(모든 js파일이 js.js파일로 합쳐짐)

4) 합친 파일의 alert()과 console.log() 제거

5) 파일 압축(최적화)

6) 파일 이름에 .min 덧붙이기 (js.js에서 js.min.js가 됨)

7) public/dist/js로 js.min.js파일이 이동됨)

- 명령

gulp

* default라는 이름으로 정의된 task가 실행된다.

- 결과

1) public/dist폴더를 localhost:8080 접속가능

2) clean작업 실행 (public/dist 폴더 삭제)

3) js작업 실행 (검사, 합침, 압축, 배포)

4) css작업 실행 (검사, 합침, 압축, 배포)

5) res작업 실행 (배포)

6) html작업 실행 (압축, 배포)

7) 소스 변경 감시 (변경되면 해당 작업 실행, public/dist폴더 안의 내용이 변경되면 브라우저 새로고침)

///// 유용한 플러그인

-JS

gulp-jshint        JS파일 오류 검사

gulp-concat        JS파일 하나로 합치기

gulp-uglify        JS파일 압축(최적화)

- CSS

gulp-csslint        CSS파일 오류 검사

gulp-concat-css    CSS파일 하나로 합치기

gulp-uglifycss     CSS파일 압축(최적화)

- HTML

gulp-minify-html    HTML 압축(최적화)

del            파일&폴더 삭제(지우기)

gulp-rename    파일 이름 고치기

gulp-if        pipe에서 조건에 따른 처리하기

gulp-webserver    웹서버 실행

gulp-livereload    브라우저 새로고침 

※ LiveReload

Chrome을 실행하고 Chrome Store에서 livereload plugin을 설치하면 주소창 오른쪽에 livereload 버튼이 생긴다. 

그걸 ON 시켜주면 적용 된다.(동그라미 안의 동그라미가 검정색으로 칠해지면 ON이다.)

적용되면 소스가 바뀔때 마다 자동으로 새로고침을 해준다. 짱신기 >_< ㅋㅋ

///// 참고

Gulp.js에 대해 알아보자: http://horajjan.blog.me/220342038306

Gulp 입문 1 - Gulp에 대한 소개: http://programmingsummaries.tistory.com/356

Gulp 입문 2 - Gulp 익히기: http://programmingsummaries.tistory.com/377