gulp-newer로 이미지 최적화했던 방법 오류 해결하기
gulp-newer 라이브러리 또는 gulp-changed 라이브러리로 수정 or 새로 추가된 이미지만 구별하여 imagemin으로 이미지파일을 최적화를 할때, 문제가 한가지 있습니다.
수정된 이미지 파일을 구별하지 못한다는 것입니다.
때문에 해결 방법을 조사해봤는데 gulp-cached 라는 라이브러리를 알게되었습니다.
해당 라이브러리는 gulp-newer 또는 gulp-changed 와는 다른 방법을 파일의 수정사항을 파악하기 때문에 이러한 이슈가 발생하지 않습니다.
그리고 gulp4의 since lastRun 기능을 사용했을 때의 이슈도 발생하지 않습니다.
아무래도 gulp와 grunt는 웹테스크 매니저로써 추세로보면 요즘 잘 사용하지 않는 툴이라 그렇게 정교하게 개발 안한건지.. 더 발전 안하는 건지..는 모르겠지만 since lastRun 기능에 문제가 많은 것 같습니다.
때문에 이를 보완해주는 라이브러리를 사용해야되는데 그런 라이브러리중에 모든 이슈를 해결하고 원하는 결과를 만들어준 라이브러리는 gulp-cached 라이브러리같습니다.
다음과 같이 사용하면 걸프 속도를 끌어올릴 수 있습니다.
export const optimize_imgs = () => {
return src([
`${config.src}/img/**/*.{png,jpg,svg,gif}`,
`!${config.src}/img/sprites/**/*`,
`!${config.src}/img/sprites-svg/**/*`
])
.pipe(cache('optimizeImage'))
.pipe(imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.mozjpeg({quality: 75, progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({
plugins: [
{removeViewBox: true},
{cleanupIDs: false}
]
})
], {
verbose: true
}))
.pipe(dest(`${config.dist}/img/`))
}