generator-polymer-gulp

Yeoman generator for Polymer projects using Gulp

Introduction

generator-polymer-gulp uses Yeoman (the web's scaffolding tool for modern webapps) to set up a working environment for building Polymer components, saving you time writing boilerplate.

This project was inspired by

• generator-polymer
• Google Web Starter Kit

Features

This project uses

• Gulp (the streaming build system) for automating your build cycle.
• Browserify (js modules bundler) for building your js.
• SASS (css with superpowers) for developing your css.
• BrowserSync (time-saving synchronised browser testing) for multi-browser/multi-device easy development with live reload.
• Closure Compiler (js compiler) for packaging your js to download and run faster.
• Vulcanize (build tool for HTMLImports and web components) for packaging your polymer components.

Getting Started

Install:

npm install -g generator-polymer-gulp

Make a new dir && cd into it:

mkdir my-polymer-component && cd $_

Scaffold a new Polymer component:

yo polymer-gulp

Launch a dev web server watching dev files with live reload:

gulp serve

Build all assets for production and distribution:

gulp build

Clean / Rebuild everything: gulp

Folders structure

At bootstrap your working directory contains

• app/ : your application logic
• lib/ : external libs used (including .bower_components)

The build cycle will later create

• _tmp/ : the app build for development (js browserifyd, css sassed)
• _dist/ : the app built for production (js compiled, css uncssd, html minified)
• _dist/_vulcanized/ : your polymer component built for distribution (csp, inline, raw)

Options

• --skip-install

  Skips the automatic execution of bower and npm after scaffolding has finished.

Scripts

npm run pre-publish

Will package everything and copy your _dist folder to another repo created near the root of your current working folder named as follows

<% your component name >_dist  

License

Apache 2.0 License 2004 Copyright (c) 2014 Nicolas Arbogast