Advanced tools

The Polymer CLI is the recommended starting point for tools related to developing Polymer elements. If for some reason it does not meet your needs, here is a list of the underlying tools that it is composed of. You can use a build tool like Gulp or Grunt in combination with these tools to create your own workflow.

Development

polyserve—web server for developing elements

Equivalent to Polymer CLI command polymer serve.

polyserve is simple web server for serving bower_components, locally. It's useful when developing your own elements.

polyserve serves the component from the current directory as /components/{element-name}/, where element-name is defined as the name in bower.json. All other dependencies are served from ./bower_components/.

Install:

npm install -g polyserve

Usage:

cd my-element/
polyserve -p 8080

Source: github.com/PolymerLabs/polyserve

polylint—lint projects for errors and common mistakes

Equivalent to Polymer CLI command polymer lint.

polylint is a linting tool to detect common mistakes and errors in your projects.

Install:

npm install -g polylint

Usage:

polylint --root my-project/ \
    --input elements.html my-element.html

Source: github.com/PolymerLabs/polylint

Web component tester—unit-testing tool for elements

Equivalent to Polymer CLI command polymer test.

Web component tester is a tool providing a browser-based testing environment for web components. Out of the box it includes support for Mocha, Chai, Async and Sinon. See Test your elements for detailed usage.

Install:

npm install -g web-component-tester

Usage:

wct
wct -l chrome (runs tests in chrome only)

By default, any tests under test/ will be run. You can override this by specifying particular files (or globs of files) via wct path/to/files.

If you prefer not to use WCT's command line tool, you can also run WCT tests directly in a browser via a web server of your choosing.

For details on using WCT, see Test your elements.

Source: github.com/Polymer/web-component-tester

Build and optimization

This section lists commands used by the Polymer CLI command polymer build. You can use them directly if you need to customize your build process.

vulcanize—optimize HTML Imports

vulcanize is a tool for crushing an HTML Import file and its dependent HTML Imports into one file. Think of it as a build step for web components. Vulcanize reduces the number of requests made by your application by concatenating imports into a single file.

Install:

npm install -g vulcanize

Usage (CLI):

vulcanize --inline-scripts --inline-css --strip-comments \
    elements.html > elements.build.html

Vulcanize can be used from the CLI or ran programmatically from Node, gulp-vulcanize, or grunt-vulcanize. Read more about vulcanize in Optimize for production.

Source: github.com/Polymer/vulcanize

Related tools

• gulp-vulcanize
• grunt-vulcanize
• broccoli-vulcanize

crisper—extract inline script from an HTML Import

crisper is a tool for extracting inline scripts from an HTML file and splitting them into a separate file. This is useful for cases where you need CSP compliance.

Install:

npm install -g crisper

Usage:

crisper --html build.html --js build.js index.html

Source: github.com/PolymerLabs/crisper

Related tools

• gulp-crisper
• grunt-crisper

polyclean—minify JS/CSS/HTML

polyclean provides basic Gulp plugins for minifying and cleaning JS, CSS, and HTML.

Install:

npm install -g polyclean

Usage:

vulcanize --inline-css --inline-scripts index.html | polyclean

Source: github.com/PolymerLabs/polyclean

polymer-build-Provides granular control of building and optimizing applications

Equivalent to Polymer CLI command polymer build.

polymer-build is a tool for creating custom builds for your application. It is the same library that powers the build command in the CLI, but using it directly gives you more control over that process. You can include custom optimizations, compilations, bundling, events, and more. See the polymer-build README for more information on how to use.

Install:

npm install polymer-build

Usage:

// Create a build pipeline to bundle our application before writing to the 'build/' dir
mergeStream(project.sources(), project.dependencies())
  .pipe(project.bundler)
  .pipe(gulp.dest('build/'));

Source: github.com/Polymer/polymer-build