gulp - plugin make file combination, compress, grammer checkek(gulp 플러그인을 활용한 파일결합, 압축, 문법 검사)

gulpfile.js

//Modules 호출
var gulp = require('gulp'),
		csslint = require('gulp-csslint'),
		concatcss = require('gulp-concat-css'),
		uglifycss = require('gulp-uglifycss'),
		jshint = require('gulp-jshint'),
		stylish = require('jshint-stylish'),
		uglify = require('gulp-uglify'),
		concat = require('gulp-concat'),
		rename = require('gulp-rename'),
		gulpif = require('gulp-if'),
		del = require('del'),
		config = require('./config.json');



/*
** 폴더 / 파일 제거 
** del(['dist/*','!dist/dont-delete.js']) 명령어를 수행한면 해당 디렉터리에서 ...js를 제외하고 삭제된다. 
*/
gulp.task('clean', function() {
	del(['dist/*']);
});


/*
** css
** npm 설치 모듈 : gulp-csslint, gulp-concat-css, gulp-uglifycss
** 문법 검사 > 병합 > 압축  
** css 찹축하지 않은 팡리과 압축한 파일로 출력 설정하기 
*/
gulp.task('styles', function() {
	gulp.src(config.path.css.src)
		// css 문법 검사
		.pipe(gulpif(config.lint, csslint({'import' : false}))) 
		.pipe(gulpif(config.lint, csslint.reporter()))
		//파일 병합 
		.pipe(gulpif(config.concat, concatcss(config.path.css.filename)))
		//압축하지 않은 파일 출력 
		.pipe(gulpif(config.rename, gulp.dest(config.path.css.dest)))
		//압축 
		.pipe(gulpif(config.uglify, uglifycss())) 
		//압축한 파일 이름 바꿔 출력
		.pipe(gulpif(config.rename, rename({suffix: '.min'})))
		.pipe(gulp.dest(config.path.css.dest)); 
});

/*
** Javascript
** 문법검사 > 병합 > 압축 
*/
gulp.task('scripts',['js:hint','js:concat','js:uglify']);

// JS 문법 검사 
gulp.task('js:hint',function(){
	gulp.src(config.path.js.src)
		.pipe(gulpif(config.lint, jshint()) )
		.pipe(gulpif(config.lint, jshint.reporter(stylish)) );
});

// JS 병합 
gulp.task('js:concat',function(){
	gulp.src(config.path.js.src)
		.pipe(gulpif(config.concat, concat(config.path.js.filename)) )
		.pipe(gulpif(config.rename, gulp.dest(config.path.js.dest)) );
});

// JS 압축  
gulp.task('js:uglify',function(){
	gulp.src(config.path.js.dest + config.path.js.src)
		.pipe(uglify({
		}))
		.pipe(gulpif(config.rename, rename( { sufix: '.min' } )) )
		//gulp-rename 모듈로 압축 비압축 파일 출력하기 evernote 참조
		.pipe(gulp.dest(config.path.js.dest));
});
/*
** 이전과 달리 rename() 내부에 변경할 파일 이름을 직접 입력하는 것이 아니라, 옵션 형태로 접미사값을 .min으로 설정. 파일 이름을 어떻게 변경하든 사용자가 매번 변경할 파일 이름 값을 수정하지 않게 하려고 변경할 파일 이름을 직접 입력하는 대신 옵션으로 설정한 것. 
** 
*/

//Gulp.task()를 사용해 기본(Default) 테스크 정의
gulp.task('default',['clean','styles','scripts']);
/*
**디렉터리를 정리한 후 조합한 업무를 기본 업무로 정의할 수 있다.
*/
//지속적으로 관찰(Watch) 업무 정의
gulp.task('watch',['clean'], function() {
	gulp.watch(config.path.css.src, ['styles']);
	gulp.watch(config.path.js.src, ['scripts']);
});

1. gulp 디렉토리에 src 디렉터리를 만들어 병합할 js파일을 생성.
2. gulp.src() 메소드 줄은 gulp 객체의 src()에 병합하려는 자바 스크립트 파일 경로를 배열 데이터 형식으로 추가하면 순서대로 병합하는 명령어이다.
   

• src 디렉터리와 파일을 생성한 후 진행.
  

3. .pipe() 줄은 gulp-concat 모듈을 호출하여 참조한 concat() 함수에 병합한 후 생성할 파일 이름을 문자열로 전달해서 실행한다. -> 이 과정에서 병합되고 생성하고자 하는 파일 이름이 결정된다.
4. 마지막 .pipe() 줄에서는 gulp.dest() 메소드가 수행된다.
5. gulp 객체의 dest()는 전달받은 인자를 토대로 파일이 출력될 목적지를 설정하는 역할을 한다.

• 병합할 파일 개수가 늘어나면 유지보수 측면에서 바로 전에 사용한 배열 방식은 불편
  -> '모든 자바 스크립트 파일을 의미하는 문자열(*.js)'로 변경해야 한다.

• 단, 위 방법은 유지보수를 할때는 편리하지만, 파일 간 병합이 알파벳 순서대로 된다.
• 그러므로, 특정 파일을 우선적으로 병합하려면 그림처럼 배열을 사용하되, 병합할 파일 경로를 먼저 제공한다. 그런 다음 보든 파일을 의미하는 문자열(*)을 배치한다.

gulp-uglify 모듈로 자바 스크립트 파일 압축하기

- Gulp 플러그인 gulp-uglify( https://www.npmjs.com/package/gulp-uglify ) 를 설치한다.