Почему mustache.js выдает ошибку?

Question

[Сергей Бурдужа]

Пытаюсь создать спрайт svg с помощью gulp.
Вот содержимое gulpfile.js

let svgSprite = require('gulp-svg-sprite'),
    svgmin = require('gulp-svgmin'),
    gulp = require('gulp'),
    cheerio = require('gulp-cheerio'),
    replace = require('gulp-replace');

gulp.task('svgSpriteBuild', function(){
    return gulp.src('assets/i/icons/*.svg')
    // minify svg
        .pipe(svgmin({
            js2svg: {
                pretty: true
            }
        }))
        // remove all fill, style and stroke declarations in out shapes
        .pipe(cheerio({
            run: function($){
                $('[fill]').removeAttr('fill');
                $('[stroke]').removeAttr('stroke');
                $('[style]').removeAttr('style');
            },
            parserOptions: {xmlMode: true}
        }))
        // cheerio plugin create unnecessary string '>', so replace it.
        .pipe(replace('>', '>'))
        // build svg sprite
        .pipe(svgSprite({
            mode: {
                symbol: {
                    sprite: "../sprite.svg",
                    render: {
                        scss: {
                            dest: '../../../sass/_sprite.scss',
                            template: "assets/sass/templates/_sprite_template.scss"
                        }
                    }
                }
            }
        }))
    .pipe(gulp.dest('assets/i/sprite/'));
});

Вот содержимое шаблона scss

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

{{#shapes}}
.icon-{{base}} {
  font-size:({{height.inner}}/10)*1rem;
  width:({{width.inner}}/{{height.inner}})*1em;
}

Вот ошибка при компиляции

Starting 'svgSpriteBuild'...
/var/www/test.loc/node_modules/mustache/mustache.js:226
      throw new Error('Unclosed section "' + openSection[1] + '" at ' + scanner.pos);
      ^

Error: Unclosed section "shapes" at 207
    at parseTemplate (/var/www/test.loc/node_modules/mustache/mustache.js:226:13)
    at Writer.parse (/var/www/test.loc/node_modules/mustache/mustache.js:450:34)
    at Writer.render (/var/www/test.loc/node_modules/mustache/mustache.js:465:23)
    at Object.render (/var/www/test.loc/node_modules/mustache/mustache.js:603:26)
    at /var/www/test.loc/node_modules/svg-sprite/lib/svg-sprite/mode/base.js:165:27
    at /var/www/test.loc/node_modules/async/dist/async.js:3866:24
    at replenish (/var/www/test.loc/node_modules/async/dist/async.js:998:17)
    at /var/www/test.loc/node_modules/async/dist/async.js:1002:9
    at _parallel (/var/www/test.loc/node_modules/async/dist/async.js:3865:5)
    at Object.parallelLimit$1 [as parallelLimit] (/var/www/test.loc/node_modules/async/dist/async.js:3971:5)

Process finished with exit code 1

Думаю, что для mustache.js возникают проблемы с шаблоном, я это выяснил методом тыка(закоментировал поочередно все задачи).
Вот ссылка на статью glivera-team.github.io/svg/2016/06/13/svg-sprites-...
Вот ссылка на сам проект https://github.com/seriiserii825/bugfix
Уже пол дня мучаюсь с этим спрайтом, почти что получилось, немножно осталось подножать))
Буду рад помощи.

Answer 1

[Евгений Калибров]

Думаю, что ошибка возникает из-за какой-то невалидной svg или шаблона scss, в котором не закрывается тэг, проверьте ваши svg файлы из которых вы собираете спрайт.

Comments

[Евгений Калибров]

поищите по файлам проекта "shapes" и проверьте корректно ли закрывается тэг?

[Сергей Бурдужа]

Проверил, вроде все в порядке

[Сергей Бурдужа]

Я в шторме работаю, он мне подсвечивает ошибки. Пока все чисто. Я тоже удивился, что в отзывах статьи у всех запустилось, только у меня косяки.

[Евгений Калибров]

Видимо конфликт идёт именно с mustache.js, в статье же без него примеры были

[Сергей Бурдужа]

Евгений Калибров, Я его сам не подключал, даже не знал про его существование. Ладно буду искть дальше.
А вы какой способ используете?

[motr]

Сергей Бурдужа, думаю, я понял вашу ошибку в шаблоне mustache не закрыли:

{{#shapes}}
.icon-{{base}} {
  font-size:({{height.inner}}/10)*1rem;
  width:({{width.inner}}/{{height.inner}})*1em;
}
{{/shapes}}

[Сергей Бурдужа]

motr, Да, но шторм все равно посвечивает ошибки, с чего бы это?

[Евгений Калибров]

motr, да, точно! Как раз об этом и подозревал изначально, а сейчас обратил внимание на код в вопросе:

{{#shapes}}
.icon-{{base}} {
  font-size:({{height.inner}}/10)*1rem;
  width:({{width.inner}}/{{height.inner}})*1em;
}

Нужно закрыть shapes

[motr]

а в шторме у вас подключён синтаксис mustache? возможно линтер определяет шаблон как другой язык(scss например) и естественно подсветит ошибки
ведь начало шаблона, как раз и написано на scss.
просто не обращайте вимание на это

[Сергей Бурдужа]

motr, Спасибо, не зря вы старались. Какая-то глупая ошибка отняло столько времени. Но за то с mustache познакомился, запомнится на всю жизнь)).

[Евгений Калибров]

Сергей Бурдужа, motr Совместными усилиями решили проблему)

[Сергей Бурдужа]

Евгений Калибров, Согласен, и вам тоже спасибо.

[motr]

Евгений Калибров, + нам в карму =)

[motr]

Сергей Бурдужа, хороший шаблонизатор, я его и для png спрайтов использую. А вообще шаблонизаторы сильная штука. советую с lodash познакомиться ещё https://learn.javascript.ru/template-lodash

[Сергей Бурдужа]

motr, Позже, не все сразу. Сначала со спрайтами до конца разобраться, бы.

[Сергей Бурдужа]

motr, Я установил плагин mustache, но все равно ошибки посвечиваются.

Просто эта красная волнистая линия тянеться по всему редактору.

[motr]

Сергей Бурдужа, "возможно линтер определяет шаблон как другой язык(scss например) и естественно подсветит ошибки
ведь начало шаблона, как раз и написано на scss.
просто не обращайте вимание на это"

попробуйте удалить начало, перестанет подчёркивать

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

[Сергей Бурдужа]

motr, Не перестал, ладно, позже разберусь, спасибо.

[Евгений Калибров]

попробуйте добавить pattern для плагина mustache - *.scss

[Сергей Бурдужа]

Евгений Калибров, Все еще хуже стало, половина ошибок mustache, половина scss. Когда добавлял паттерн, приходилось этот же паттернт удалить для scss. Должен сущетствовать другой способ.