gulp로 js 파일, css파일 Minify 및 Merge하기

 

 

gulp 이해를 돕는데 가장 많이 도움을 받은 블로그입니다.

단계씩 작성해주신 글만 따라가도 잘 할 수 있습니다.

다만, 예제를 따라하면서 자세하지 않았거나 몰랐던 부분 같은 것을 기억하기 위해 글을 씁니다.

(도움을 받은 블로그에서는 약간의 지식이 깔려있어야한 듯 싶습니다.) 

https://valuefactory.tistory.com/314  = https://programmingsummaries.tistory.com/393  

gulp란? gulp시작하기

 

먼저 프로젝트 폴더 생성합니다.

[cmd]

mkdir testFolder

 

생성한 폴더로 들어간 후

[cmd]

cd ./testFolder

 

gulp를 install 해줍니다.

gulp 버전 4 이상부터는 gulp모듈에서 cli가 분리되어서 둘 다 install 해줘야한답니다.

따라서 gulp cli는 전역설치하고 gulp는  프로젝트에 설치해줍니다.

[cmd]

npm install --global gulp-cli

npm install --save-dev gulp

gulp 앞에 --save-dev가 붙는 이유는 개발에서만 쓰이기 때문에 devDependencies에 넣기 위함입니다. 

개발시에만 쓰이는 경우가 많아서 그렇다고합니다.

 

gulp install이 완료되었는지 확인하고싶다면 버전 정보를 출력해볼 수 있습니다.

[cmd]

gulp-v

 

현재 폴더구조는 이렇습니다.

node_modules와 package-lock.json이 생겼다.

 

그 다음 minify와 merge를 진행하기 위해 각각의 모듈을 install해줍니다.

한번에 받기

[cmd]

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

 

minify 모듈은 gulp-uglify

[cmd]

npm install --save-dev gulp-uglify 

 

merge 모듈은 gulp-concat

[cmd]

npm install --save-dev gulp-concat

 

merge, minify 시킬 파일이 있어야 하므로 예제에 필요한 폴더와 파일들을 생성해보겠습니다.

 

src 폴더를 생성하고 그 폴더 하위에 js 폴더를 생성해줍니다. 

그 후에 index.js와 sayHello.js 파일을 생성하겠습니다.

 

현재 폴더구조입니다.

src > js > index.js / sayHello.js

 

예제를 작성해보겠습니다.

내용은 중요하지 않습니다. 그냥 minify, merge 기능을 확인해볼거니깐요.

 

[sayHello.js]

module.export = {
    sayHelloFunc : function sayHelloFunc(name){
        var name = name || 'Lee';
        return 'Hello~' + name;
    }
};

 

간단히 설명하면, 호출할 때 네임값을 넣어주면 Hello~ [name]이 나오는 코드입니다.

이것을 export하고 있습니다.

 

[index.js]

var sayHelloFunc = require('./sayHello');
console.log(sayHelloFunc('J.K!'));

 

sayHello.js에서 export한것을 require로 가져와서 호출해줍니다.

자 그럼 중요하지 않은 js 예제를 지나서 gulp설정을 해주겠습니다.

 

gulp를 설정하기 위해서는 루트에 gulpfile.js 파일을 생성해야합니다.

 

현재 폴더구조입니다.

gulpfile.js 생성

 

먼저 merge 설정을 하겠습니다.

[gulpfile.js]

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

// 자바스크립트 파일을 병합
gulp.task('concat', function() {
    return gulp.src('src/js/*.js')
        .pipe(concat('main.js')) // main.js로 파일이름을 짓고 병합
        .pipe(gulp.dest('dist')); // dist 폴더에 병합한 파일 생성 
});

// gulp를 실행하면 default 로 concat task를 실행
gulp.task('default', gulp.series('concat'));

[코드설명입니다.]

1.사용자가 gulp를 실행하면 gulp.task('default')가 가장먼저 실행됩니다.

2.실행시키는 task는 바로 뒤에 오는 gulp.series('concat')를 실행 시킵니다. 

.pipe()는 실행 순서를 담는다고 보면 될 것 같습니다.

 

gulp.task('concat')가 실행되면

gulp.src(경로)에 있는 파일을 찾아서 concat 모듈을 통해 main.js 파일명으로 병합합니다.

이 때 gulp.dest('dist')를 통해 dist 폴더에 병합한 파일을 생성해줍니다. 

dist라는 폴더가 있을 때에는 그곳에 생성하고 없다면 dist 폴더와 함께 생성합니다.

 

gulp.src('src'/js/*.js')라고 src > js > .js확장자의 모든 파일이라는 것인데, 특정한 파일로만 설정도 가능합니다.

 

여기까지 진행했다고하면 cmd 창을 열고 gulp를 입력하여 실행시킬 수 있습니다.

[cmd]

gulp

gulp 실핼 시 폴더구조

dist가 생성된 것이 확인됩니다.

 

concat으로 merge시킨 main.js파일

이번에는 minify를 먼저한 후에 merge를 시켜보도록 하겠습니다.

 

[gulpfile.js]

const gulp = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');

// 자바스크립트 파일을 병합
gulp.task('concat', function () {
    return gulp.src('src/js/*.js')
        .pipe(uglify())
        .pipe(concat('main.min.js')) // main.min.js 로 이름 변경
        .pipe(gulp.dest('dist'));
});

gulp.task('default', gulp.series('concat'));

 

1.모듈을 require하는 부분과

2..pipe()로 uglify()를 실행시킨 부분이 추가되었습니다.

3.또한 minify한 파일임을 알기 쉽게 main.js로 merge 시키던 부분을 main.min.js로 수정해줬습니다.

 

사용자가 gulp를 실행하면

1.gulp.task('default')를 호출해서 gulp.series('concat')이 호출되고 gulp.task('concat')이 실행됩니다

2.gulp.src(경로)의 파일을 찾아 .pipe()의 순서에 따라 uglify()가 먼저 호출되므로 minify가 먼저 진행되고 

3.그 이후 concat 모듈에 의해 merge 후 dist 폴더에 main.min.js 이름의 파일이 생성됩니다.

 

merge와 minify가 끝난 폴더구조

 

main.min.js

 

 

그럼 다음 포스팅에서 이 작업을 자동화해보도록 하겠습니다.

다음포스팅바로가기