Git Hooks로 이미지 압축을 자동화하는 방법

이 이야기는 일종의 이야기와 튜토리얼 믹스입니다. 다음 부분으로 구성됩니다.

이미지를 압축해야 하는 이유는 무엇입니까?

무엇이 이 문제로 이어지나요?

내가 어떻게 했지?

그러니 지체 없이 시작합시다. 왜 무엇을 어떻게 :-)

이미지를 압축해야 하는 이유는 무엇입니까?

이 튜토리얼은 이미지를 압축해야 하는 이유에 대한 것이 아닙니다. 인터넷에는 이미 이것에 대한 좋은 리소스가 많이 있습니다. 요약해서 말하자면:

큰 이미지는 웹 페이지 속도를 저하시켜 나쁜 사용자 경험을 만듭니다. (아무도 기다리길 원하지 않는다)

큰 이미지 파일은 사이트 속도를 저하시키고 검색 엔진은 느린 사이트를 싫어합니다(잘못된 SEO로 이어짐)

큰 이미지에는 고대역폭이 필요함

압축되지 않은 이미지가 불필요한 바이트로 페이지를 부풀립니다.

이것에 대한 더 많은 정보가 있습니다. 그러나 여기서 설명하는 것은 의미가 없습니다. 이 인터넷에서 이 모든 정보를 찾을 수 있습니다.

나에게 이것이 무엇입니까?

개인 프로젝트를 할 때나 조직에서 할 때마다. 내 이미지를 정리하고 수동으로 일부 압축 사이트로 이동한 다음 압축된 사이트로 변환하고 교체해야 합니다. 어느 날 제 리드가 저에게 이 작업을 자동화하지 않는 이유를 물었습니다. 나는 이것을 자동화할 수 있는 좋은 소스나 어떤 것도 찾지 못했습니다. 그래서 저도 공유할 가치가 있다고 생각했습니다.

참고: 이 작업을 수행한 타사 서비스가 이미 있습니다. 그러나 다시 해당 서비스를 구매해야 합니다. 이 튜토리얼은 모두 후크를 사용한 압축 자동화에 관한 것이며 소규모 프로젝트의 경우 프로젝트가 다른 타사 서비스를 얼룩지게 하는 것을 원하지 않습니다.

내가 어떻게 했어?

이것은 흥미로운 부분입니다. 시작합시다. 처음에 이미지 크기는 다음과 같습니다.



참고: 이 이미지는 데모용으로만 사용했습니다.

그래서 이 물건을 자동화하기 위해 husky(git hook용)을 사용하고 lint-staged를 사용합니다.

Husky는 더 나은 방식으로 git hooks를 사용하기 위한 좋은 npm 패키지입니다.

lint-staged는 스테이징 파일에 대해 실행되는 linter입니다(코드 미화, 사용하지 않는 코드 또는 악성 코드 확인 등과 같은 스테이징 파일에 대해 실행하려는 코드와 같습니다)

.

이미지 압축을 위해 저는 sharp(오픈 소스)를 사용합니다. 이 패키지가 왜 다른 패키지가 아닌지에 대한 질문이 있는 경우 좋은 패키지가 너무 많습니다. 나는 이것에 전적으로 동의합니다. 그러나이 모든 질문은 이미 예리하게 답변되었습니다.

performance guide을 확인할 수 있습니다. 이미 이러한 질문에 대한 답변을 제공하고 있습니다.

코드 시간:

따라서 논리는 이미지의 코드 검사를 커밋하기 전에 이미지가 발견되면 커밋하기 전에 이미지를 압축하는 것입니다.
다른 작업(포스트 커밋, 사전 빌드 등)을 수행할 수 있습니다.

다음은 완전한 코드입니다.

{
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

/**
  A precommit script to compress image before commiting file
  Q: Why Sharp package used?
  A: https://sharp.pixelplumbing.com/performance

 */

const fs = require("fs");
const sharp = require("sharp");//https://sharp.pixelplumbing.com/

/*
Function: Update existing file to new compress file
 */
const minifyFile = filename => {
  new Promise((resolve, reject) => {
    /*Read upcomimg file*/
    fs.readFile(filename, function(err, sourceData) {
      if (err) throw err;
      /*If file buffer data is present convert it into new compressed file*/
      sharp(sourceData).toFile(filename, (err, info) => {
        err ? reject(err) : resolve();
      });
    });
  });
};

/*
Fetch images maps from args and compress all.
Compressing is asynchronuous process.
So wait for all image to compress and return.
*/
Promise.resolve(process.argv)/*Find more. here: https://nodejs.org/en/knowledge/command-line/how-to-parse-command-line-arguments/*/
  .then(x => x.slice(2))
  .then(x => x.map(minifyFile))
  .then(x => Promise.all(x))
  .catch(e => {
    process.exit(1);
  });

{
  "name": "image-compression",
  "version": "1.0.0",
  "description": "Pre commit script to compress images",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": {
    "name": "Shubham Verma"
  },
  "license": "ISC",
  "devDependencies": {
    "husky": "^4.2.5",
    "lint-staged": "^10.2.7",
    "sharp": "^0.25.3"
  },
  "lint-staged": {
    "*.{png,jpeg,jpg,gif,svg}": [
      "node ./compress-image.js"
    ]
  }
}

이미 모든 것을 코드로 설명했습니다. 언제든지 저에게 연락해 주세요.

마지막으로 중요한 증거 ;-)

그게 전부입니다. 의심스러운 점이 있으면 언제든지 질문하십시오. 전체 코드는 Github에서 사용할 수 있습니다. 부담없이checkout

당신은 트위터에서 나에게 연락 할 수 있습니다