Skip to content
This repository has been archived by the owner on Sep 7, 2022. It is now read-only.

Commit

Permalink
Update to polymer-build v0.6.0 (#51)
Browse files Browse the repository at this point in the history
* Update to PSK v2.1.1

* Update polymer-build to v0.6.0

* Copy .gitignore

* Update ESLint config to eslint-config-google, like PSK

* Refactor the swPrecacheConfig and polymerJson paths

* Update npm run lint as last PSK

* Improve comments for bundling

* Update imagemin to default config

* Remove unused path require

* Fix: Copy all the PSK dotfiles

* Update the root README.md

* Update template README.md with npm run build
  • Loading branch information
abdonrd authored and robdodson committed Jan 12, 2017
1 parent 52cde54 commit 0dd6830
Show file tree
Hide file tree
Showing 16 changed files with 274 additions and 356 deletions.
2 changes: 2 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
generators/app/polymer-starter-kit/*
generators/app/gulpfile.js
7 changes: 7 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"extends": ["eslint:recommended", "google"],
"env": {
"es6": true,
"node": true
}
}
4 changes: 2 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
node_modules
coverage
coverage/
node_modules/
62 changes: 23 additions & 39 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,18 @@
# generator-polymer-init-custom-build

[![Build Status](https://travis-ci.org/PolymerElements/generator-polymer-init-custom-build.svg?branch=eslint-travis)](https://travis-ci.org/PolymerElements/generator-polymer-init-custom-build)
[![Build Status](https://travis-ci.org/PolymerElements/generator-polymer-init-custom-build.svg?branch=master)](https://travis-ci.org/PolymerElements/generator-polymer-init-custom-build)

This template is a starting point for building apps using Polymer Starter Kit
with a custom gulp process leveraging
[polymer-build](https://github.com/Polymer/polymer-build), the library
powering [Polymer CLI](https://github.com/Polymer/polymer-cli).
with a custom gulp process leveraging [polymer-build](https://github.com/Polymer/polymer-build),
the library powering [Polymer CLI](https://github.com/Polymer/polymer-cli).

### Setup

##### Prerequisites

First, install
[Polymer CLI](https://www.polymer-project.org/1.0/docs/tools/polymer-cli)
and generator-polymer-init-custom-build using
[npm](https://www.npmjs.com/)
(we assume you have pre-installed [node.js](https://nodejs.org/)).
First, install [Polymer CLI](https://github.com/Polymer/polymer-cli) and
generator-polymer-init-custom-build using [npm](https://www.npmjs.com) (we
assume you have pre-installed [node.js](https://nodejs.org)).

npm install -g polymer-cli
npm install -g generator-polymer-init-custom-build
Expand All @@ -37,53 +34,40 @@ routing for the app:

### Build

Rather than rely on the usual `polymer build` command, this project gives you
an "escape hatch" so you can include additional steps in your build process.
Rather than rely on the usual `polymer build` command, this project gives you an
"escape hatch" so you can include additional steps in your build process.

The included `gulpfile.js` relies on
[the `polymer-build` library](https://github.com/Polymer/polymer-build),
the same library that powers Polymer CLI. Out of the box it will clean the
`build` directory, and provide image minification. Follow the comments in the
The included `gulpfile.js` relies on [the `polymer-build` library](https://github.com/Polymer/polymer-build),
the same library that powers Polymer CLI. Out of the box it will clean the
`build` directory, and provide image minification. Follow the comments in the
`gulpfile.js` to add additional steps like JS transpilers or CSS preprocessors.

npm run build

### Preview the build

This command serves the minified version of the app at `http://localhost:8080`
in an unbundled state, as it would be served by a push-compatible server:
This command serves the minified version of the app at `http://localhost:8080`:

polymer serve build/unbundled

This command serves the minified version of the app at `http://localhost:8080`
generated using fragment bundling:

polymer serve build/bundled
polymer serve build/

### Run tests

This command will run
[Web Component Tester](https://github.com/Polymer/web-component-tester) against
the browsers currently installed on your machine:
This command will run [Web Component Tester](https://github.com/Polymer/web-component-tester)
against the browsers currently installed on your machine:

polymer test

### Adding a new build step

The gulpfile already contains an example build step that demonstrates how to
run image minification across your source files. For more examples, refer to
the section in
[the polymer-build README on extracting inline sources](https://github.com/Polymer/polymer-build#extracting-inlined-cssjs).
The `gulpfile.js` already contains an example build step that demonstrates how
to run image minification across your source files. For more examples, refer to
the section in [the polymer-build README on extracting inline sources](https://github.com/Polymer/polymer-build#extracting-inlined-cssjs).

### Adding a new view

You can extend the app by adding more views that will be demand-loaded
e.g. based on the route, or to progressively render non-critical sections
of the application. Each new demand-loaded fragment should be added to the
list of `fragments` in the included `polymer.json` file. This will ensure
those components and their dependencies are added to the list of pre-cached
components (and will have bundles created in the fallback `bundled` build).

## License

The Polymer project uses a BSD-like license available [here](./LICENSE.txt)
e.g. based on the route, or to progressively render non-critical sections of the
application. Each new demand-loaded fragment should be added to the list of
`fragments` in the included `polymer.json` file. This will ensure those
components and their dependencies are added to the list of pre-cached components
(and will have bundles created in the fallback `bundled` build).
80 changes: 80 additions & 0 deletions generators/app/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
# Polymer App Toolbox - Starter Kit

[![Build Status](https://travis-ci.org/PolymerElements/polymer-starter-kit.svg?branch=master)](https://travis-ci.org/PolymerElements/polymer-starter-kit)

This template is a starting point for building apps using a drawer-based
layout. The layout is provided by `app-layout` elements.

This template, along with the `polymer-cli` toolchain, also demonstrates use
of the "PRPL pattern" This pattern allows fast first delivery and interaction with
the content at the initial route requested by the user, along with fast subsequent
navigation by pre-caching the remaining components required by the app and
progressively loading them on-demand as the user navigates through the app.

The PRPL pattern, in a nutshell:

* **Push** components required for the initial route
* **Render** initial route ASAP
* **Pre-cache** components for remaining routes
* **Lazy-load** and progressively upgrade next routes on-demand

### Setup

##### Prerequisites

First, install [Polymer CLI](https://github.com/Polymer/polymer-cli) using
[npm](https://www.npmjs.com) (we assume you have pre-installed [node.js](https://nodejs.org)).

npm install -g polymer-cli

And install the dependencies:

npm install && bower install

### Start the development server

This command serves the app at `http://localhost:8080` and provides basic URL
routing for the app:

polymer serve --open

### Build

The included `gulpfile.js` relies on [the `polymer-build` library](https://github.com/Polymer/polymer-build),
the same library that powers Polymer CLI. Out of the box it will clean the
`build` directory, and provide image minification. Follow the comments in the
`gulpfile.js` to add additional steps like JS transpilers or CSS preprocessors.

`gulpfile.js` also generates a `service-worker.js` file with code to pre-cache
the dependencies based on the entrypoint and fragments specified in
`polymer.json`.

npm run build

### Preview the build

This command serves the minified version of the app at `http://localhost:8080`:

polymer serve build/

### Run tests

This command will run [Web Component Tester](https://github.com/Polymer/web-component-tester)
against the browsers currently installed on your machine:

polymer test

### Adding a new build step

The `gulpfile.js` already contains an example build step that demonstrates how
to run image minification across your source files. For more examples, refer to
the section in [the polymer-build README on extracting inline sources](https://github.com/Polymer/polymer-build#extracting-inlined-cssjs).

### Adding a new view

You can extend the app by adding more views that will be demand-loaded
e.g. based on the route, or to progressively render non-critical sections of the
application. Each new demand-loaded fragment should be added to the list of
`fragments` in the included `polymer.json` file. This will ensure those
components and their dependencies are added to the list of pre-cached components
and will be included in the `bundled` build.
22 changes: 0 additions & 22 deletions generators/app/gulp-tasks/clean.js

This file was deleted.

25 changes: 0 additions & 25 deletions generators/app/gulp-tasks/images.js

This file was deleted.

138 changes: 0 additions & 138 deletions generators/app/gulp-tasks/project.js

This file was deleted.

Loading

0 comments on commit 0dd6830

Please sign in to comment.