[npm]Gulp를 이용해서 반복적인 작업 한번에 하기 (gulp-zip, gulp-images-resizer)

반복적인 패키징 작업을 어떻게 좀더 쉽게 할까 하다가 알아낸 방법!

 

1. gulp 설치

>> npm install gulp -g

 

2. npm시작 (경로설정 후 시작//프로젝트생성)

>> npm init 

 

3. gulp 및 gulp-zip설치 

(프로젝트에서 사용하겠다고 정의하는것과 같음 1번과 별개로 프로젝트경로내에서 설치 필요)

>>npm i gulp --save-dev

>>npm install gulp-zip --save-dev

>>npm install gulp-images-resizer

 

4. gulpfile.js파일생성

var gulp = require('gulp');
const zip = require('gulp-zip');
let resizer = require('gulp-images-resizer');

/*   패키징되어야하는 폴더명을 저장  */
var titleArray = ['testTile1','testTitle2','title3']; 


//
function zipCreate2(title){
	//압출될 파일을 지정한다.
    return gulp.src([title+'/index.html',title+'/thumb.png' , title+'/images/**/*', title+'/css/**/*', title+'/js/**/*'], { base: '.' }).
/*   base 옵션(제외할 파일 설정 . (.으로시작하는 파일제외)  */
    pipe(zip(title+'.zip')). // 저장될 파일명 설정
    pipe(gulp.dest('result')); // 저장될 경로설정 
}
 
//이미지사이즈 변경 
 function resizeImg(title) {
 //
    return gulp.src(title+'/images/thumb.png') //가져올 파일
    .pipe(resizer({
            format: "png", //저장할 확장자
            width: 200, //저장할 사이즈
            height: 150 //저장할 사이즈 
        }))
    .pipe(gulp.dest(title)); //저장할 경로 
}


//실제로 실행되는 부분 
//실행명령어 >>gulp deploy
gulp.task('deploy' ,function () {
    titleArray.map(resizeImg)
    titleArray.map(zipCreate2);
});

 

5. gulpfile.js파일에 정의한 task실행

>>gulp deploy