полимерная сборка завершается ошибкой при первом запуске анализатора

Сбой задачи сборки после PR #77, из-за которого сборка полимера выполнялась polymer-analyzer на project.sources(). Я использую nunjucks для предварительного рендеринга моих шаблонов, поэтому анализатор не работает.

Polymer({
    is: 'my-app',
    properties: {
        page: {
            type: String,
            reflectToAttribute: true
        },
        pages: {
            type: Array,
            value: {$ pages | dump | safe $}  // fails here
        }
    }
});

Моя задание gulp выглядит так:

return project.sources()
.pipe(gulpif('**/*.{html,js,json}', template.compile(Object.assign({}, metadata, resources))))
.pipe(project.splitHtml())
...

Могу ли я отключить или отложить (предпочтительно) анализатор?

Мой репозиторий: https://github.com/gdg-x/hoverboard/tree/develop


polymer nunjucks
person ozasadnyy    schedule 11.01.2017    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Polymer Analyzer поддерживает стандартный JavaScript. Если вы пишете в каком-то альтернативном синтаксисе, вам нужно преобразовать этот синтаксис, прежде чем он попадет в Анализатор. Библиотека polymer-build предназначена для этого варианта использования. Вы можете создать конвейер Gulp и, прежде чем файлы попадут в Analyzer, выполнить свои пользовательские преобразования.

Библиотеку polymer-build смотрите здесь: https://github.com/Polymer/polymer-build

Надеюсь, это поможет!

person Justin Fagnani    schedule 12.01.2017

arrow_upward
1
arrow_downward

Я нашел решение. Выглядит не идеально, но работает. Сборка делится на 3 этапа:

Компиляция с помощью nunjucks в каталог .temp на основе PolymerJson

return gulp.src([
...polymerJson.sources,
polymerJson.entrypoint 
], {base: '.'})
.pipe(gulpif(/\.(html|js|json)$/, nunjucks.compile(metadata, {
  tags: {
    variableStart: '{$',
    variableEnd: '$}'
  }
})))
.pipe(gulpif(/\.(html|js)$/, replace('bower_components', '../bower_components')))
.pipe(gulp.dest(config.tempDirectory));

Оптимизация и сборка проекта

let polymerProject = null;
console.log(`Deleting ${config.build.rootDirectory} and ${config.tempDirectory} directories...`);

del([config.build.rootDirectory, config.tempDirectory])
  .then(() => {
    console.log(`Compiling template...`);

    const compileStream = template.compile(config, polymerJson)
      .on('end', () => {
        polymerProject = new polymerBuild.PolymerProject(buildPolymerJson);
      });
    return waitFor(compileStream);
  })
  .then(() => {
    console.log(`Polymer building...`);

    const sourcesStream = polymerProject.sources()
      .pipe(polymerProject.splitHtml())
      // splitHtml doesn't split CSS https://github.com/Polymer/polymer-build/issues/32
      .pipe(gulpif(/\.js$/, uglify()))
      .pipe(gulpif(/\.(html|css)$/, cssSlam()))
      .pipe(gulpif(/\.html$/, html.minify()))
      .pipe(gulpif(/\.(png|gif|jpg|svg)$/, images.minify()))
      .pipe(polymerProject.rejoinHtml());

Не забудьте переместить файлы из каталога build/.temp:

return gulp.src(`${config.build.rootDirectory}/${config.tempDirectory}/**/*`,
{base: `${config.build.rootDirectory}/${config.tempDirectory}`})
.pipe(gulpif(/\.(html|js)$/, replace('../bower_components', 'bower_components')))
.pipe(gulpif(/\.(html|js)$/, replace('/.temp', '')))
.pipe(gulp.dest(config.build.rootDirectory));

Вот полный gulpfile.js

person ozasadnyy    schedule 15.01.2017

arrow_upward
0
arrow_downward

Чтобы добавить к ответу Джастина, вот пример того, как это может выглядеть:

return gulp.src('src/')
    .pipe(splitHTML())
    .pipe(gulpif('**/*.{html,js,json}', template.compile(Object.assign({}, metadata, resources))))
    .pipe(rejoinHTML())
    .dest('lib/');    

// once that is complete...
return project.sources()
    // .pipe(... the rest of your build pipeline!

Вам просто нужно убедиться, что ваш полимер.json указывает на ваш каталог lib/ для источников, а не src/, так как анализатору нужно будет читать из каталога lib/ с нунчаками.

person Fred K. Schott    schedule 13.01.2017