무료 SVG 소재의 출처를 명시하기위한 gulp 플러그인을 만들었습니다.

만든 것

gulp-svg-gallery

SVG 파일과 SVG 파일의 캡션을 작성한 텍스트 파일 (.txt)을 주면 위 이미지와 같은 정적 HTML을 생성합니다.

계기

무료 SVG 소재의 대부분은 사용 조건으로 출처를 명시하는 것을 언급합니다. 정해진 저자의 SVG 소재 밖에 사용하지 않는다면, 바닥글에 그 저자에 대한 크레딧을 표시하는 것으로 대응할 수 있습니다만, 복수의 저자/사이트의 소재를 조합해 사용하는 경우, 상기의 방법에서는, 어느 화상이 어느 저자에 의한 것인지 모르는 문제가 있습니다. 그래서 이미지의 썸네일과 이미지의 출처와 라이센스를 조합하여 표시하고 싶습니다.

기술적인 것

gulp 플러그인을 만드는 것은 이것이 처음이었기 때문에, @morou 씨의 알기 쉬운 입문 기사 를 참고로 했습니다. 독립적인 SVG 파일을 인라인화하기 위한 가공에는 cheerio 을 사용했습니다.

힘든 일

처음의 gulp 플러그인이었지만, 만들지 않으면 의외로 간단하게 할 수 있는 것을 알았습니다. 만들기 시작한 후 2시간 정도로 SVG를 HTML에 무가공으로 임베드하는 단순한 기능을 구현할 수 있었습니다. 그 후, SVG를 올바르게 인라인화하기 위해서 cheerio에서 몇가지 가공을 실시하도록 했습니다만, cheerio의 API에 좀처럼 익숙하지 않고, 꽤 시간이 걸려 버렸습니다.

이번에는 cheerio에서 고생했지만 gulp 플러그인 자체는 꽤 쉽게 만들 수있는 것 같습니다. 조금 자동화하고 싶은 태스크가 있다고 하는 경우에는 자신용의 플러그인을 만들어 보는 것은 어떻습니까.