A Yeoman generator for Web Components using Polymer with an integrated build process through Gulp (CSS autoprefixer, eslint, live reload with browserSync and code minification).

The generator and gulpfile are highly inspired by Generator Polymer Element.

First, install Yeoman and generator-polymer-web-component using npm (we assume you have pre-installed node.js).

$ npm install -g yo
$ npm install -g generator-polymer-web-component

Then generate your new component:

$ yo polymer-web-component

By default, the component's name will be the folder where you execute the command. If you specify a name for your component, the generator will create a folder with that name for your component if the current folder doesn't match that name.

Run gulp inside your component to build the minified version and serve the component's demo.

Note: the source files are located inside the src folder.

$ cd <component-path> && gulp

Use the flag --no-minify to build the dist without minify.

$ gulp --no-minify

You can choose TDD or BDD style for unit tests. Navigate to https://localhost:<port>/test/ to run your tests.

The port may change depending on the ports in use.

You need web-component-tester installed globally:

$ npm install -g web-component-tester

Then, you can run your tests on the specified local browsers (Chrome by default) in wct.conf.js:

$ cd <component-path> && wct

Code coverage is done with Istanbul. By default, the coverage thresholds for statements, branches, functions and lines are set to 70%. You can change this thresholds in wct.conf.js.

MIT © Kus Cámara