compare before & after screenshot2

주의사항

노드 최신버전에서 사용해야 오차가 많이 줄어드는 것 같습니다.
모듈 중에 최신 javascript로 개발된 모듈이 있는 것 같아서요.

• 로컬서버실행 gulpfile.js
• 업데이트 이전 이후 스크린샷 찍기 - second.js
• 스크린샷 비교하기 - last.js
• package.json

• download

• gulpfile.js

      'use strict'
        
      const {src, parallel} = require('gulp'),
          connect = require('gulp-connect'),
          open = require('gulp-open');
        
      const server = () => {
          return connect.server({
              root: 'dist/',
              port: 8000,
              livereload: true
          })
      };
        
      // 브라우저 오픈 업무
      const browser = () => {
          const options = {
              uri: 'http://localhost:8000/',
              app: "chrome" //chrome, firefox, iexplore, opera, safari
          };
          return src('dist/')
              .pipe(open(options)); // local 서버가 아닌 파일 경로로 열려면 '<%file.path%>' 를 넣어주면된다.
      };
        
      exports.default = parallel(server, browser);
  

• second.js

      'use strict'
        
      process.setMaxListeners(0);
        
      const fs = require('fs'),
          path = require('path'),
          captureWebsite = require('capture-website');
        
      fs.mkdirSync('pc/after', { recursive: true });
      fs.mkdirSync('pc/before', { recursive: true });
      fs.mkdirSync('m/after', { recursive: true });
      fs.mkdirSync('m/before', { recursive: true });
        
      const before = fs.readFileSync('dist/before/index.html', 'utf8'),
          after = fs.readFileSync('dist/after/index.html', 'utf8');
      let beforeList = before.match(/[src]*\/*html\/(.*?)\.html/g),
          afterList = after.match(/[src]*\/*html\/(.*?)\.html/g),
          beforeItems = [],
          afterItems = [];
        
      for (let i=0; i<beforeList.length; i++) {
          if (!Array.isArray(beforeItems[i])) beforeItems[i] = [];
          beforeItems[i] = [`http://localhost:8000/before/${beforeList[i]}`, path.basename(beforeList[i])]
      }
        
      for (let i=0; i<afterList.length; i++) {
          if (!Array.isArray(beforeItems[i])) afterItems[i] = [];
          afterItems[i] = [`http://localhost:8000/after/${afterList[i]}`, path.basename(afterList[i])]
      }
        
      const mobileOpts = {
          fullPage: true,
          emulateDevice: 'iPhone X',
          delay: 5
      };
        
      const pcOpts = {
          fullPage: true,
          delay: 5
      };
        
      (async () => {
          await Promise.all(beforeItems.map(([url, filename]) => {
              return captureWebsite.file(url, `pc/before/${filename}.png`, pcOpts);
          }));
          await Promise.all(afterItems.map(([url, filename]) => {
              return captureWebsite.file(url, `pc/after/${filename}.png`, pcOpts);
          }));
          await Promise.all(beforeItems.map(([url, filename]) => {
              return captureWebsite.file(url, `m/before/${filename}.png`, mobileOpts);
          }));
          await Promise.all(afterItems.map(([url, filename]) => {
              return captureWebsite.file(url, `m/after/${filename}.png`, mobileOpts);
          }));
      })();
  

• last.js

      'use strict'
        
      const fs = require('fs'),
          path = require('path'),
          resemble = require('resemblejs');
        
      const compare = () => {
        
          const name = fs.readFileSync('dist/before/index.html', 'utf8'),
              name2 = fs.readFileSync('dist/after/index.html', 'utf8');
          let nameList = name.match(/[src]*\/*html\/(.*?)\.html/g),
              nameList2 = name2.match(/[src]*\/*html\/(.*?)\.html/g);
          const num = nameList.length > nameList2.length ? nameList2.length : nameList.length;
        
          for (let i=0; i<num; i++) {
              resemble(`pc/before/${path.basename(nameList[i])}.png`)
                  .compareTo(`pc/after/${path.basename(nameList2[i])}.png`)
                  .onComplete(function (data) {
                      let diff = JSON.stringify(data.diffBounds)
                      if (data.misMatchPercentage !== '0.00') {
                          console.log(`pc - ${nameList[i]} : ${nameList2[i]} = ${data.misMatchPercentage}, ${diff}`);
                      }
                  });
          }
        
          for (let i=0; i<num; i++) {
              resemble(`m/before/${path.basename(nameList[i])}.png`)
                  .compareTo(`m/after/${path.basename(nameList2[i])}.png`)
                  .onComplete(function (data) {
                      let diff = JSON.stringify(data.diffBounds)
                      if (data.misMatchPercentage !== '0.00') {
                          console.log(`m - ${nameList[i]} : ${nameList2[i]} = ${data.misMatchPercentage}, ${diff}`);
                      }
                  });
          }
      }
        
      compare();
  

• package.json

      {
        "name": "99_image_compare",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1"
        },
        "author": "",
        "license": "ISC",
        "devDependencies": {
          "capture-website": "^1.0.0",
          "gulp": "^4.0.2",
          "gulp-connect": "^5.7.0",
          "gulp-open": "^3.0.1",
          "resemblejs": "^3.2.4"
        }
      }