2017-03-07 2 views
1

configurate로 간단한 favicon 색을 만들고 꿀꺽 거리는 모듈을 시작하려고합니다 : https://www.npmjs.com/package/gulp-recolor-svg 하지만 여전히 작동하지 않습니다.꿀꺽 꿀꺽 거리는 소리 svg가 작동하지 않습니다

(ERROR) 콘솔 반환 : 내 무엇 = (

TypeError: firstColor.rgbArray is not a function 
at colorDifference (/var/www/html.site.ru/src/node_modules/gulp-recolor-svg/lib/ColorMatcher.js:11:62) 

SVG

<?xml version="1.0" encoding="utf-8"?> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve"> 
    <path fill="#00ff00" d="M6.3,1.1v5.2H1.1c-0.7,0-0.7,0.5-0.7,1.2c0,0.7,0.1,1.2,0.7,1.2h5.2v5.2c0,0.7,0.5,0.7,1.2,0.7 
     c0.7,0,1.2-0.1,1.2-0.7V8.7h5.2c0.7,0,0.7-0.5,0.7-1.2c0-0.7-0.1-1.2-0.7-1.2H8.7V1.1c0-0.7-0.5-0.7-1.2-0.7 
     C6.8,0.4,6.3,0.5,6.3,1.1"/> 
</svg> 

gulpfile.js

var gulp = require('gulp'); 
var color = require('color'); 
var recolorSvg = require('gulp-recolor-svg'); 

gulp.task('default', function() { 
    return gulp 
    .src('favicon.svg') 
    .pipe(recolorSvg.GenerateVariants([recolorSvg.ColorMatcher(color('#00ff00'))], [ 
     {suffix: '--prod', colors: [color('#72982d')]}, 
     {suffix: '--dev', colors: [color('#8d67d2')]} 
    ])) 
    .pipe(gulp.dest('/')); 
}); 

실수?

PS : 여기 어딘가에 실수를하면 내가 인식의 편의를 위해 내 스크립트를 단순화, 나는 ==================

) 미안 해요 ==========================================================================================================/lib 디렉토리/RecolorSvg.js 라이브러리에서 제공하는 색상의 노출 된 버전을 사용하는 경우 =======

node_modules/꿀꺽 - 칠 - SVG는

// Generated by CoffeeScript 1.10.0 
(function() { 
    var Color, colorDifference, convert; 

    Color = require("color"); 

    convert = require("color-convert"); 

    colorDifference = function(firstColor, secondColor) { 
    var firstColorLabComponents, secondColorLabComponents, sumOfDifferencesSqaured; 
    firstColorLabComponents = convert.rgb.lab.raw(firstColor.rgbArray()); 
    secondColorLabComponents = convert.rgb.lab.raw(secondColor.rgbArray()); 
    sumOfDifferencesSqaured = firstColorLabComponents.map(function(value, index) { 
     return value - secondColorLabComponents[index]; 
    }).map(function(value) { 
     return Math.pow(value, 2); 
    }).reduce(function(sum, value) { 
     return sum + value; 
    }, 0); 
    return Math.pow(sumOfDifferencesSqaured, 0.5); 
    }; 

    module.exports = function(colorToMatch, maxDifference) { 
    if (maxDifference == null) { 
     maxDifference = 0.1; 
    } 
    return function(color) { 
     var difference; 
     difference = colorDifference(colorToMatch, color); 
     return difference <= maxDifference; 
    }; 
    }; 

}).call(this); 
+0

'firstColor.rgbArray()'는 다음과 같이 보일 것입니다 :'rgbArray.call (firstColor)' 맞습니까? – user3688243

+0

'.rgbArray()'는 잘못된 형식으로 인해 색상을 읽을 수 없지만 필요한 색상의 형식은 무엇입니까? – user3688243

+0

아직 해결되지 않았습니다. – user3688243

답변

0

, 당신은 안 문제가있다.

RecolorSvg.GenerateVariants(
    [RecolorSvg.ColorMatcher(RecolorSvg.Color("red"))], 
    [ 
     { suffix: "--hover", colors: [ SvgRecolor.Color("red") ] }, 
     { suffix: "--active", colors: [ SvgRecolor.Color("red").darken(0.1) ] }, 
     { suffix: "--focus", colors: [ SvgRecolor.Color("cyan") ] }, 
     { suffix: "--disabled", colors: [ SvgRecolor.Color("#ccc") ] } 
    ] 
) 

표시된 오류는 색상 모듈 API의 변경 사항과 해당 모듈의 내부 버전이 오래되었습니다.

+0

좋아, 시도해 보겠습니다. – user3688243

관련 문제