2017-03-07 10 views
1

configurateで単純なfavicon recolorを作成し、gulpモジュールを起動しようとしています:https://www.npmjs.com/package/gulp-recolor-svg しかし、それでも動作しません。gulp recolor 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:私は==================知覚の便宜のために私のスクリプトを簡略化し、私はどこか、ここでミスを犯した場合、私は申し訳ありません)

========================================== =======

node_modules /飲み込む-色の変更-SVG/libに/ RecolorSvg.js

// 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

関連する問題