3
respostas

Erro ao executar o svgmin

Bom dia,

Estou com problema numa execução, possuo uma pasta de ícones no meu projeto, em que alguns deles eu criei pelo Inkscape e ele executou o comando, mas em determinado icone ele parou, que foi um desses que eu criei e quando e então eu tento executar novamente o comando e o erro é sempre o mesmo, tentei salvar de outra forma a saída do arquivo, mas não adiantou, o que estou fazendo errado? Ajuda...

Meu arquivo gulpfile ficou assim (o nome da tarefa executada é gulp svg):

var gulp = require ('gulp');
var clean = require('gulp-clean');
var cssnano = require ('gulp-cssnano');
var uglify = require ('gulp-uglify');
var svgstore = require('gulp-svgstore');
var svgmin = require('gulp-svgmin');
var path = require('path');
var imagemin = require('gulp-imagemin');
var svgSprite = require('gulp-svg-sprite');     

gulp.task('copy', ['clean'], function() {
    return gulp.src('assets/**/*')
        .pipe(gulp.dest('dist'));
});

gulp.task('clean', function() {
    return gulp.src('dist')
        .pipe(clean());
});

/* Minificação */
gulp.task('scripts', function() {
    return gulp.src('assets/js/**/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/js/'))
});

gulp.task('css', function() {
    return gulp.src('assets/css/**/*.css')
        .pipe(cssnano({safe: true}))
        .pipe(gulp.dest('dist/css/'))
    });

gulp.task('minify', ['scripts', 'css']);

/* Imagens */
gulp.task('imagemin', function() {
    return gulp.src('assets/logos/bpms/*')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [
                {removeViewBox: false},
                {cleanupIDs: false}
            ]
        }))
        .pipe(gulp.dest('dist/logos/bpms'));
});

gulp.task('svg', function () {
    return gulp
        .src('assets/icon/custom/*.svg')
        .pipe(svgmin(function (file) {
            var prefix = path.basename(file.relative, path.extname(file.relative));
            return {
                plugins: [{
                    cleanupIDs: {
                        prefix: prefix + '-',
                        minify: true
                    }
                }]
            }
        }))
        .pipe(svgstore())
        .pipe(gulp.dest('dist/icon/custom/'));
});

gulp.src('path/to/assets/*.svg')
    .pipe(svgSprite( ))
    .pipe(gulp.dest('out'));

gulp.task('watch', function() {
    gulp.watch('assets/js/**/*.js', function(event) {
        gutil.log('File '+event.path+' was '+event.type+', running tasks...');
        gulp.run('scripts');
    });
});

O erro é: Starting 'svg'... C:\projetos\orquestra-gulp\orquestra-paper\src\plugins\orquestra-bootstrap\node_modules\gulp-svgmin\node_modules\csso\lib\parser\index.js:73 throw error; ^

CssSyntaxError: Colon is expected at parseError (C:\projetos\orquestra-gulp\orquestra-paper\src\plugins\orquestra-bootstrap\node_modules\gulp-svgmin\node_modules\csso\lib\parser\index.js:46:17) at eat (C:\projetos\orquestra-gulp\orquestra-paper\src\plugins\orquestra-bootstrap\node_modules\gulp-svgmin\node_modules\csso\lib\parser\index.js:82:5) at getDeclaration (C:\projetos\orquestra-gulp\orquestra-paper\src\plugins\orquestra-bootstrap\node_modules\gulp-svgmin\node_modules\csso\lib\parser\index.js:538:5) at getDeclarations (C:\projetos\orquestra-gulp\orquestra-paper\src\plugins\orquestra-bootstrap\node_modules\gulp-svgmin\node_modules\csso\lib\parser\index.js:499:25)

3 respostas

Olá, Priscila!

Pelo erro, parece que está faltando um ":" (dois-pontos ou colon, em inglês).

CssSyntaxError: Colon is expected at parseError

Você consegue saber o ícone exato. Veja se faz sentido a falta de um ":".

Não faço idéia, já fiz vários testes, sempre o mesmo erro! Fui no inkscape e salvei novamente todos os ícones, continua o erro!

Starting 'svgmin'...
C:\projetos\orquestra-gulp\orquestra-paper\src\plugins\orquestra-bootstrap\node_modules\gulp-svgmin\node_modules\csso\lib\parser\index.js:73
    throw error;
    ^

CssSyntaxError: Colon is expected
    at parseError (C:\projetos\orquestra-gulp\orquestra-paper\src\plugins\orquestra-bootstrap\node_modules\gulp-svgmin\node_modules\csso\lib\parser\index.js:46:17)
    at eat (C:\projetos\orquestra-gulp\orquestra-paper\src\plugins\orquestra-bootstrap\node_modules\gulp-svgmin\node_modules\csso\lib\parser\index.js:82:5)
    at getDeclaration (C:\projetos\orquestra-gulp\orquestra-paper\src\plugins\orquestra-bootstrap\node_modules\gulp-svgmin\node_modules\csso\lib\parser\index.js:538:5)
    at getDeclarations (C:\projetos\orquestra-gulp\orquestra-paper\src\plugins\orquestra-bootstrap\node_modules\gulp-svgmin\node_modules\csso\lib\parser\index.js:499:25)
    at Object.getBlock [as block] (C:\projetos\orquestra-gulp\orquestra-paper\src\plugins\orquestra-bootstrap\node_modules\gulp-svgmin\node_modules\csso\lib\parser\index.js:529:23)
    at parse (C:\projetos\orquestra-gulp\orquestra-paper\src\plugins\orquestra-bootstrap\node_modules\gulp-svgmin\node_modules\csso\lib\parser\index.js:1864:34)
    at minify (C:\projetos\orquestra-gulp\orquestra-paper\src\plugins\orquestra-bootstrap\node_modules\gulp-svgmin\node_modules\csso\lib\index.js:81:9)
    at Object.minifyBlock (C:\projetos\orquestra-gulp\orquestra-paper\src\plugins\orquestra-bootstrap\node_modules\gulp-svgmin\node_modules\csso\lib\index.js:130:12)
    at Object.exports.fn (C:\projetos\orquestra-gulp\orquestra-paper\src\plugins\orquestra-bootstrap\node_modules\gulp-svgmin\node_modules\svgo\plugins\minifyStyles.js:38:42)
    at C:\projetos\orquestra-gulp\orquestra-paper\src\plugins\orquestra-bootstrap\node_modules\gulp-svgmin\node_modules\svgo\lib\svgo\plugins.js:59:45

Faça o seguinte: remova todos os ícones e vá colocando um por um. Aí, você vai conseguir isolar qual deles é o problemático!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software