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
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
andnpm
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