가벼운 Html, css 기반 웹 버전관리 스크립트

최근 웹 사이트 트렌드를 살펴보면

뭐 별것도아닌 사이트 만드는데도

react, vue, angular 등의 라이브러리 혹은

프레임워크를 사용하는 경향이 있습니다.

 

왜 그런걸까요...

아마도 의존성이 생긴것이 아닌가 싶습니다.

너무 길들여진 나머지

pure javascript와 html, css로는

웹 사이트를 만들지 못하게된

개발자가 많아진것은 아닐까요?

 

각설하고

정말 가벼운 웹사이트를 퍼블리상 할 일이 생겨

만들고 난 뒤에 js, css 파일등의 버전 관리를

어떻게 할까 고민해 보았습니다

 

1. 웹팩을 쓴다?

2. 몇번이나 업데이트한다고.. 직접 수정한다.

3. 스크립트를 통해 관리한다!

 

3번 방식을 채택하였습니다.

프로젝트 규모에 비해 너무 과하지도 않고

직접 하는것에 비해 과거 버전과 충돌할 가능성은

0%로 줄이는 효과가 있기 때문입니다.

 

코드는 간략하게 작성했는데요

프로젝트 구조가

index.html
/css (직접 작성한 코드)
  style.css
  pallete.css
/js (직접 작성한 코드)
  something.css
/common (swipe.js나 jquery같은 손대지 않을 소스코드)
  /css
  /js

이렇게 되어있다고 했을때의

코드로 보시면 되겠습니다

const fs = require("fs");
const html = fs.readFileSync("index.html").toString();

fs.readdir("./css", async (err, filenames) => {
  if (err) {
    console.log("err: ", err);
  } else {
    let newHtml = html;

    const renames = filenames.map((filename) => {
      const newFileName = getNewFilename(filename);
      fs.renameSync("./css/" + filename, "./css/" + newFileName);
      newHtml = newHtml.replace(strReplace(filename), newFileName);
      return newFileName;
    });
    await Promise.all(renames);

    fs.writeFileSync("./index.html", newHtml, "utf8");
  }
});

function strReplace(str) {
  return new RegExp(str, "gi");
}

function getNewFilename(currentName) {
  const dotIndex = currentName.indexOf(".");
  return `${currentName.slice(0, dotIndex)}.${new Date().valueOf()}.css`;
}

/css 폴더 경로의 파일들을 버전관리 하는

node script 파일입니다.

 

/js 폴더의 스크립트 버전도 관리하려면

css파트를 복붙해서 js로만 변경해주면 되겟죠?

 

해당 소스코드는  github에도 올려두었습니다

https://github.com/jaekwangLee/css-versioning