gulp 설정

걍 간단히 js 정도에서 그럭저럭 쓰고 있어서 아래와 같이 정리해본다.

여기도 기똥차게 잘 설명해 놨으니 참고

http://code.tutsplus.com/ko/tutorials/managing-your-build-tasks-with-gulpjs--net-36910

기본 정보는 아래 참조 

https://github.com/gulpjs/gulp

gulp plug-in 검색

http://gulpjs.com/plugins/

다양한 gulp 레시피

https://github.com/gulpjs/gulp/tree/master/docs/recipes

철저히 나의 기준임을 알림!!!!!!!

- 파일 병합 / console, alert제거 / 압축정도만 기술~ 

우선 node.js 가 설치 되어 있어야 한다.

설치되었다면 아래 코드를 terminal에서 시작

1. 초기 설정. (해당 프로젝트 폴더로 터미널경로를 이동되어 있어야 한다)

매 프로젝트마다 저 선언은 해주어야 package.json 이 생성된다. ( npm에 의한 프로젝트 의존성 모듈 설정 파일 )

npm init

2. gulp 전역(global)설치

npm install gulp -g

3. 프로젝트내 local gulp devDependency 설치

npm install gulp --save-dev

4. 필요한 gulp plug-in 설치

일단 - 병합 / console, alert제거 / 압축 플러그인만 설치

npm install gulp-concat --save-dev
npm install gulp-uglify --save-dev
npm install gulp-strip-debug --save-dev

5. 프로젝트 내에 루트 경로에 gulpfile.js 라는 설정파일 생성시킴. 아래와 같이 지정. 

//node.js의 require()를 이용하여 gulp 및 plug-in 로딩
var gulp = require('gulp');
var stripDebug = require('gulp-strip-debug');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

//gulp.task(이름, [수행전 실행파일], 수행할 기능 내용 function ) 목적 수행
//gulp.src()-파일 경로 지정. 파일 경로 앞에 ! 표시 붙이면 해당 경로의 파일은 제외됨.
//gulp.src( ['파일경로', '파일경로'] ) -파일 여러개일 경우 배열로 선언
//gulp.src( '파일경로' )-파일 한개의 경우 문자열로 지정가능 
//gulp.pipe() - gulp.src()로 읽어들인 소스파일에 지정한 플러그인 실행
//uglify()-압축난독화
//stripDebug() -gulp-strip-debug 플러그인 실행- console/alert 지워줌 
//stripDebug()-주석처리된 console등은 제거안됨
//concat('comb.js') - 지정한 파일들을 긁어와서 comb.js 한개의 js파일로 병합됨.
// gulp.dest() - output 지정. 즉 최종 뽑아낸 comb.js라고 지정한 파일 경로. 
gulp.task('combine', function() {
    gulp.src([
        '지정할 폴더경로/*.js',
        '!제외시킬 파일 경로'
    ]).pipe( uglify() ).pipe( stripDebug() ).pipe( concat('comb.js')).pipe( gulp.dest('./scripts') );
});
//gulp.watch - 지정한 task를 감시? 하여 재발행~
gulp.watch('폴더경로/*.js', function(){
    gulp.run('combine');
})