Search code examples
polymernunjucks

polymer-build fails when runs analyzer first


Build task fails, after PR #77 which made polymer-build to run polymer-analyzer on project.sources(). I am using nunjucks to pre-render my templates, that's why analyzer fails.

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

My gulp task looks like:

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

Can I disable or postpone (preferable) analyzer?

My repository: https://github.com/gdg-x/hoverboard/tree/develop


Solution

  • I have found a solution. Doesn't seem perfect but works. The build is divided into 3 steps:

    Compiling with nunjucks into .temp directory basing on 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));
    

    Optimizing and building the project

    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());
    

    Don't forget to move files from build/.temp directory:

    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));
    

    Here is full gulpfile.js