generator-polymer-jade
v0.2.0
Published
Yeoman generator for Polymer apps with Jade templates support
Downloads
9
Maintainers
Readme
Yeoman generator for Polymer apps with Jade templates support
Attribution
This project is based mostly on Yeoman Polymer Generator with some custom modifications.
Introduction
Polymer is a library of polyfills and sugar which enable the use of Web Components in modern browsers. The project allows developers to build apps using the platform of tomorrow and inform the W3C of places where in-flight specifications can be further improved.
generator-polymer-jade
provides Polymer scaffolding using Yeoman (a scaffolding tool for the web), letting you easily create and customize Polymer (custom) elements via the command-line and import them using HTML Imports. This saves you time writing boilerplate code so you can start writing up the logic to your components straight away.
Features
- A Polymer app scaffold built with
HTML5 Boilerplate
- Sub-generator to create
Polymer elements
for your app - Compile
Jade
templates to HTML - Support for
Stylus
,SASS/SCSS
,LESS
or justplain CSS
withAutoprefixer
PageSpeed
Insights for performance tuning- web-component-tester support
Installation
Install the generator
npm install -g generator-polymer-jade
Make a new directory and cd into it
mkdir -p my-project && cd $_
Scaffold a new Polymer project:
yo polymer-jade
Generators
Available generators:
Note: Generators are to be run from the root of your app
App
Sets up a new Polymer app, generating all the boilerplate you need to get started.
Example:
yo polymer-jade
Element (alias: El)
Generates a polymer element in app/elements
and appends an import to app/elements/elements.jade
.
Example:
yo polymer-jade:element my-element
# or use the alias
yo polymer-jade:el my-element
Note: You must pass in an element name, and the name must contain a dash "-"
One can also include element dependencies to be imported. For instance, if you're creating a fancy-menu
element which needs to import core-menu
and core-icon-button
as dependencies, you can generate the file like so:
yo polymer-jade:el fancy-menu core-menu core-icon-button
## Testing
The project generated by `yo polymer-jade` contains support for [web-component-tester](https://github.com/Polymer/web-component-tester). The following commands are included:
Run local tests (in terminal):
```bash
grunt|gulp test:local
Run remote tests with SauceLabs:
grunt|gulp test:remote
See the web-component-tester readme for configuration options.
Gotchas
The elements.jade
file
The app
generator will produce an elements.jade
file where you can place your imports. This file will be vulcanized when you run the default grunt
or gulp
tasks. You'll want to make sure that elements.jade is the only import in your index.jade file, otherwise there's a good chance you'll accidentally load Polymer twice and break the app.
Autoprefixer and style elements
The Autoprefixer task will not work with style
elements mixed into HTML files (it breaks). Meaning, if you drop a style tag inside of your Polymer element, it will not be processed by Autoprefixer. Only external CSS files can/will be processed by Autoprefixer.
Contribute
See the contributing docs
When submitting an issue, please follow the guidelines. Especially important is to make sure Yeoman is up-to-date, and providing the command or commands that cause the issue.