Question

在PR #77之后，

构建任务失败，这使得Polymer-build在09:00:31 48999-02-14 08:05:15 48999-02-08 10:59:09 48999-02-14 09:42:45 48999-02-09上运行polymer-analyzer。我正在使用nunjucks预渲染模板，这就是分析仪失败的原因。

project.sources()

我的gulp task看起来像是：

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

我可以禁用或推迟（最好）分析仪吗？

我的存储库：https://github.com/gdg-x/hoverboard/tree/develop

Answer 1

Polymer Analyzer支持标准JavaScript。如果您正在使用其他语法编写代码，则需要先将该语法转换为匹配分析器。 polymer-build库是为此用例而创建的。您可以构建Gulp管道，在文件到达Analyzer之前，执行自定义转换。

请在此处查看polymer-build库：https://github.com/Polymer/polymer-build

希望有所帮助！

Answer 2

我找到了解决方案。看起来不是很完美但有效。构建分为3个步骤：

使用基于PolymerJson

的nunjucks编译到.temp目录中

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

Answer 3

为了补充贾斯汀的回答，这里有一个例子：

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!

您只需要确保您的polymer.json指向您的lib/目录中的源而不是src/，因为分析器需要从nunchucked lib/目录中读取

首先运行分析仪时聚合物构建失败

3 个答案: