[Gulp] 최신 소스 파일만 확인하기 (gulp-newer)

먼저 gulp에 대해 잘 모르겠다면 아래 링크를 들어가 참조 부탁드린다.

https://leeda-cloud.tistory.com/64

[Gulp] Gulp 노마드코더 (Babel,Task,Pug,이미지 최적화,SASS,Autoprefixer,Minify,Browserify,GH Pages)

위의 게시물을 보면 gulp 기본 세팅에 대해 정리되어 있다.

gulpfile.babel.js를 기준으로 글을 작성하므로 헷갈리면 위의 게시물을  참고하면 좋다.

 

이 전에 작업한 이미지 최적화를 사용하던 도중 이미지가 늘어나면 늘어날수록 속도가 느려지는게 눈에 보였다.

그래서 찾아본 것이 바뀐 파일만 확인할 수 있는 gulp-newer!

 

 

gulp-newer

 

gulp-newer 설치

npm install gulp-newer --save-dev

 

gulpfile.babel.js에 추가

import gulp from "gulp";
import newer from "gulp-newer";
import imagemin from "gulp-imagemin";

const routes = {
  img: {
    src: "src/img/**/*", // 내가 저장한 이미지 경로 
    dest: "build/img",// 변환시킬 이미지 경로 
  },
};

const img = () =>
  gulp.src(routes.img.src)
  .pipe(newer(routes.img.dest))
  .pipe(imagemin())
  .pipe(gulp.dest(routes.img.dest));
  //내가 저장한 이미지 경로에서 이미지들을 가져와 무엇이 바뀌었는지 확인하고 gulp-imagemin으로 변환 후 dest에 적힌 위치로 저장한다.
  
   
const watch = () => {
      gulp.watch(routes.img.src, img);
};  


const prepare = gulp.series([img]);   
export const dev = gulp.series([prepare])

 

https://www.npmjs.com/package/gulp-newer

 

바뀐 이미지만 수정 후 적용된다고 한다.