개시하다

왜 그림 크기를 조정하고 그림을 압축해야 합니까?

• 파일 크기 조절을 통해 파일 크기 감소
· 압축을 통해 페이지 읽기 속도를 높일 수 있고 SEO에도 유리하다.

설치 준비

개발 환경: Mac(터미널 사용)
Gulp만 이미지 조작을 할 수 없기 때문에GraphicsMagick이라는 소프트웨어를 설치합니다.
참조https://www.npmjs.com/

1. 터미널에 GraphicsMagick 설치
Taminal

brew install graphicsmagick

나의 경우 이러면command not found의 오류가 발생할 수 있기 때문에 이 사이트를 참고하여 순조롭게 설치하였다.
http://macappstore.org/graphicsmagick/
2. 모듈 설치
이미지 크기 변환
gulp-image-resize
압축 이미지
gulp-imagemin　
Taminal

yarn add gulp-image-resize gulp-imagemin --dev

3. 모듈 플러그인이 증가하면 가독성이 떨어지므로 한 번에 불러올 수 있는 플러그인을 가져오십시오
Taminal

yarn add gulp-load-plugins --dev

4.glop-load-plugens,glopfile를 설치합니다.jp 내용 변경
$변수에 저장되어 pipe의 속성으로 함수를 사용할 수 있습니다.
gulpfile.jp

const{src, dest} = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();


function copyFiles(){
      return src('./src/*')
      .pipe($.rename({
      }))
      .pipe(dest('./dest'));
}

exports.copyFiles = copyFiles;

이미지 크기 조정 및 압축

1. 변경할 이미지를 화축에 준비해 이미지, 아이콘 폴더 만들기

2.gulpfile.jp 내용 변경
• 이해하기 쉽도록 변수 이름을 아이콘 이름으로 변경
・ 지정 이미지 Resize, imagemin
gulpfile.jp

const{src, dest} = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();


function icon(){
      return src('./favicon.JPG')
      .pipe($.imageResize({
        width: 100,
        height: 100,
        crop:true,//切りとる（縦横比が合わなくなる場合）
        upscale:false //拡大して画像をアップするか
      }))
　　　 .pipe($.imagemin({
      }))
      .pipe($.rename({
      }))
      .pipe(dest('./dist/images/icon'));
}

exports.icon = icon;

3. 터미널에서 실행
Taminal

　gulp icon

완성된 화면 보이면 OK.

최후

그림의 사이즈 변경과 압축이 순조롭게 끝났다.
Google PageSpeed Insights로 웹 페이지의 표시 속도를 측정하여 개선하고자 합니다.