Gulp.js 자동화로 파일 관리하기

Gulp.js

 

 

✏️Gulp.js를 통해 이미지를 압축해보자. 

 

평소에는 S3 서버에서 이미지 url을 가져와 노출해줬는데, Front assets에 이미지를 저장하고 사용해야 할 프로젝트가 생겨서 

관련 기술을 조사해보다 Gulp.js를 찾게됐다. 

 

여러모로 정보를 찾아보니, imagemin이라는 플러그인을 통해서 이미지를 압축할 수 있는 방법이 있다는 걸 알았다.

우선, Gulp.js 를 설치해야 한다.

 

npm install gulp -g 
npm install gulp --save-dev
npm i gulp-imagemin --save-dev

 

-g를 통해 전역으로 설정해야 gulp 라는 명령어를 사용할 수 있다. 

 

설치 후 root 디렉토리에 gulpfile.js 라는 파일을 만들고 아래와 같이 작성한다.

 

const gulp = require('gulp')
const imagemin = require('gulp-imagemin')
const imagePath = 'assets/images/*'

gulp.task('image', function () {
  return gulp
    .src(imagePath)
    .pipe(
      imagemin([
        imagemin.mozjpeg({ quality: 75 }),
        imagemin.optipng({ optimizationLevel: 5 }),
        imagemin.svgo({
          plugins: [{ removeViewBox: true }, { cleanupIDs: false }],
        }),
      ])
    )
    .pipe(gulp.dest('assets/images'))
})

gulp.task('watch', function () {
  gulp.watch(imagePath, gulp.series('image'))
})

gulp.task('default', gulp.parallel('image', 'watch'))

 

gulp, imagemin 등을 먼저 가져온다.

gulp.task는 한 작업을 의미한다. task('task name', function)으로 한 테스트를 만들 수 있다.

 

pipe는 순서대로 작업을 진행할 수 있도록 해주는 함수라고 보면된다.

먼저 src를 통해 어떤 파일을 대상으로 할 것인지 지정하고, imagemin([ jpeg,png,svg등의 파일 최적화를 실행하는 내용들 ])을 

통해 이미지 최적화를 진행한다. 그리고 gulp.dest를 통해 최적화가 완료된 파일을 내보낸다. 

특정 task를 실행하고 싶을 경우, gulp task-name 으로 실행할 수 있다.

 

하지만, 항상 gulp 라는 명령어를 입력하는 것 귀찮은 일이다.

두 번째 gulp.task 코드를 보자.

 

watch라는 task를 등록하고, 그 안에서 gulp.watch('watch 대상 폴더, 파일', series는 직렬, 순차적 실행)를 작성해준다. 

 

그리고 세 번째 task 코드를 보면, gulp 명령어를 입력할 때 기본으로 실행하는 함수로 defulat가 정의되어 있다.

parallel 함수는 병렬로 실행하는 함수다. 

 

이제 명령어로 gulp를 실행하면, image폴더에 파일이 바뀌거나 새로 저장될 때마다 image task를 실행한다, 

 

이렇게 이미지 압축을 위해 사용할 수도 있지만, js, css 압축등을 위해 사용하는 경우가 더 많다.