gulp-color-change-svgs

1.0.2 • Public • Published

gulp-color-change-svgs

SVG 파일들의 색상을 변경하여 새로운 파일들을 생성합니다. 같은 도안으로 여러 색상을 만들어야 하는 경우(테마 등)에 적합합니다.

Introduction

inputColor에 정의한 원본 svg 파일의 폴더명(input)과 파일명(black)과 컬러코드(#000000)를 outputColor에 정의한 것을 참조하여 새로운 svg 파일을 만듭니다.

Usage

저장소를 clone 받습니다.

git clone https://github.com/hwangsunsoo/gulp-color-change-svgs.git

gulp, gulp-replace, gulp-rename에 의존적입니다. clone 받은 후 아래 모듈을 설치합니다.

npm install --save gulp
npm install --save gulp-replace
npm install --save gulp-rename

package.json 파일에 이미 선언했기 때문에 npm install 명령만으로 설치할 수 있습니다.

아래 명령어로 구동시킬 수 있으며 명령어는 변경 가능합니다.

gulp colorChangeSvg

Code

코드의 내용은 아래와 같습니다.

'use strict';
 
const gulp = require('gulp');
const replace = require('gulp-replace');
const rename = require("gulp-rename");
 
// 입력파일경로, 색상코드, 이름
const inputColor = {
    path: 'input/', code: '#000000', name: 'black'
};
 
// 출력파일경로, 색상코드, 이름
const outputColor = [
    { path: 'red/', code: '#FF0000', name: 'red' },
    { path: 'green/', code: '#00FF00', name: 'green' },
    { path: 'blue/', code: '#0000FF', name: 'blue' },
];
 
gulp.task('colorChangeSvg', function(){
    console.log('[gulp-color-change-svgs] 시작');
    console.log('-------------------------------------------');
    outputColor.forEach(function(i){
        console.log(i.path+'에 '+i.name+' ('+i.code+') 이미지 생성');
        console.log(inputColor.name, i.name);
        gulp.src(inputColor.path+'*.svg')
            .pipe(rename(function (path) {
                path.basename = path.basename.replace(inputColor.name, i.name);
            }))
            .pipe(replace(inputColor.code, i.code))
            .pipe(gulp.dest('output/'+i.path));
    });
    console.log('-------------------------------------------');
    console.log('[gulp-color-change-svgs] 완료');
});

Publish

  • 2018년 3월 3일 (March 3, 2018)
  • 황선수 (Sunsoo Hwang) / hwangsunsoo@gmail.com / www.hwangsunsoo.com
  • 엔에이치엔테크놀로지서비스 주식회사 (NHN Technology Services Corporation)
  • 대한민국 (Republic of Korea)

Readme

Keywords

Package Sidebar

Install

npm i gulp-color-change-svgs

Weekly Downloads

1

Version

1.0.2

License

GPL-3.0

Unpacked Size

44 kB

Total Files

8

Last publish

Collaborators

  • hwangsunsoo