polymer-bundler
Advanced tools
Comparing version 1.14.11-alpha to 1.14.12-alpha
{ | ||
"name": "polymer-bundler", | ||
"version": "1.14.11-alpha", | ||
"version": "1.14.12-alpha", | ||
"description": "Process Web Components into one output file", | ||
@@ -5,0 +5,0 @@ "main": "lib/vulcan.js", |
@@ -1,22 +0,20 @@ | ||
[![NPM version](http://img.shields.io/npm/v/vulcanize.svg)](https://npmjs.org/package/vulcanize) | ||
[![Build Status](http://img.shields.io/travis/Polymer/vulcanize.svg)](https://travis-ci.org/Polymer/vulcanize) | ||
[![NPM version](http://img.shields.io/npm/v/polymer-bundler.svg)](https://npmjs.org/package/polymer-bundler) | ||
[![Build Status](http://img.shields.io/travis/Polymer/polymer-bundler.svg)](https://travis-ci.org/Polymer/polymer-bundler) | ||
# Vulcanize | ||
# polymer-bundler | ||
### Reduce an HTML file and its dependent HTML Imports into one file | ||
>Named for the [Vulcanization](http://en.wikipedia.org/wiki/Vulcanization) process that turns polymers into more durable | ||
materials. | ||
Web pages that use multiple [HTML Imports](http://www.html5rocks.com/en/tutorials/webcomponents/imports/) to load dependencies may end up making lots of network round-trips. In many cases, this can lead to long initial load times and unnecessary bandwidth usage. The Vulcanize tool follows HTML Imports and `<script>` tags to inline these external assets into a single page, to be used in production. | ||
Web pages that use multiple [HTML Imports](http://www.html5rocks.com/en/tutorials/webcomponents/imports/) to load dependencies may end up making lots of network round-trips. In many cases, this can lead to long initial load times and unnecessary bandwidth usage. The polymer-bundler tool follows HTML Imports and `<script>` tags to inline these external assets into a single page, to be used in production. | ||
In the future, technologies such as [HTTP/2](http://en.wikipedia.org/wiki/HTTP/2) and [Server Push](https://http2.github.io/faq/#whats-the-benefit-of-server-push) will likely obsolete the need for a tool like vulcanize for production uses. | ||
In the future, technologies such as [HTTP/2](http://en.wikipedia.org/wiki/HTTP/2) and [Server Push](https://http2.github.io/faq/#whats-the-benefit-of-server-push) will likely obsolete the need for a tool like polymer-bundler for production uses. | ||
## Installation | ||
`vulcanize` is available on npm. For maximium utility, `vulcanize` should be installed globally. | ||
`polymer-bundler` is available on npm. For maximium utility, `polymer-bundler` should be installed globally. | ||
npm install -g vulcanize | ||
npm install -g polymer-bundler | ||
This will install `vulcanize` to `/usr/local/bin/vulcanize` (you may need `sudo` | ||
This will install `polymer-bundler` to `/usr/local/bin/polymer-bundler` (you may need `sudo` | ||
for this step). | ||
@@ -29,10 +27,8 @@ | ||
- `--exclude <path>`: exclude a subpath from root. Use multiple times to exclude multiple paths. Tags (imports/scripts/etc) that reference an excluded path are left in-place, meaning the resources are not inlined. ex: `--exclude=elements/x-foo.html --exclude=elements/x-bar.html` | ||
- `--strip-exclude`: Exclude a subpath and remove any links referencing it. | ||
- `--inline-scripts`: Inline external scripts. | ||
- `--inline-css`: Inline external stylesheets. | ||
- `--add-import <path>`: Add this import to the target HTML before vulcanizing. Can be used multiple times. | ||
- `--redirect <uri>|<path>`: Takes an argument in the form of URI|PATH where url is a URI composed of a protocol, hostname, and path and PATH is a local filesystem path to replace the matched URI part with. Multiple redirects may be specified; the earliest ones have the highest priority. | ||
- `--strip-comments`: Strips all HTML comments not containing an @license from the document. | ||
- `--no-implicit-strip`: *DANGEROUS*! Avoid stripping imports of the transitive dependencies of imports specified with `--exclude`. May result in duplicate javascript inlining. | ||
- `--out-html <path>`: If specified, output will be written to <path> instead of stdout. | ||
- `--out-dir <path>`: If specified, output will be written to <path>. Necessary if bundling multiple files. | ||
@@ -42,3 +38,3 @@ ## Usage | ||
vulcanize target.html | ||
polymer-bundler target.html | ||
@@ -50,3 +46,3 @@ will inline the HTML Imports of `target.html` and print the resulting HTML to | ||
vulcanize target.html > build.html | ||
polymer-bundler target.html > build.html | ||
@@ -58,3 +54,3 @@ will inline the HTML Imports of `target.html` and print the result to | ||
vulcanize -p "path/to/target/" /target.html | ||
polymer-bundler -p "path/to/target/" /target.html | ||
@@ -66,3 +62,3 @@ will inline the HTML Imports of `target.html`, treat `path/to/target/` as the | ||
vulcanize --exclude "path/to/target/subpath/" --exclude "path/to/target/subpath2/" target.html | ||
polymer-bundler --exclude "path/to/target/subpath/" --exclude "path/to/target/subpath2/" target.html | ||
@@ -78,3 +74,3 @@ will inline the HTML Imports of `target.html` that are not in the directory | ||
vulcanize --inline-scripts target.html | ||
polymer-bundler --inline-scripts target.html | ||
@@ -85,3 +81,3 @@ will inline scripts in `target.html` as well as HTML Imports. Exclude flags will apply to both Imports and Scripts. | ||
vulcanize --inline-css target.html | ||
polymer-bundler --inline-css target.html | ||
@@ -92,3 +88,3 @@ will inline Polymerized stylesheets, `<link rel="import" type="css">` | ||
vulcanize --strip-comments target.html | ||
polymer-bundler --strip-comments target.html | ||
@@ -98,7 +94,7 @@ will remove HTML comments, except for those that begin with `@license`. | ||
## Using vulcanize programmatically | ||
## Using polymer-bundler programmatically | ||
Vulcanize as a library has two exported function. | ||
polymer-bundler as a library has two exported function. | ||
`vulcanize` constructor takes an object of options similar to the command line | ||
`polymer-bundler` constructor takes an object of options similar to the command line | ||
options. | ||
@@ -117,5 +113,5 @@ - `abspath`: A folder to treat as "webroot". | ||
- `inputUrl`: A URL string that will override the `target` argument to | ||
`vulcanize.process()`. | ||
`polymer-bundler.process()`. | ||
By design, gulp and grunt plugins expect to work on the given file path. | ||
`vulcanize` has its own file loader, and expects to be given URLs. In | ||
`polymer-bundler` has its own file loader, and expects to be given URLs. In | ||
instances where the filename cannot be used as a URL `inputUrl` will | ||
@@ -128,13 +124,11 @@ override the filename. | ||
`vulcanize.process` takes a `target` path to `target.html` and a callback. | ||
`polymer-bundler.process` takes a `target` path to `target.html` and a callback. | ||
Example: | ||
```js | ||
var Vulcanize = require('vulcanize'); | ||
var hydrolysis = require('hydrolysis'); | ||
var Bundler = require('polymer-bundler'); | ||
var Analyzer = require('polymer-analyzer'); | ||
/* a Hydrolysis loader object (optional) */ | ||
var loader = new hydrolysis.loader(...) | ||
var vulcan = new Vulcanize({ | ||
var bundler = new Bundler({ | ||
abspath: '', | ||
@@ -153,31 +147,10 @@ excludes: [ | ||
implicitStrip: true, | ||
stripComments: false | ||
// optional | ||
loader: loader, | ||
inputUrl: '' | ||
stripComments: true | ||
}); | ||
vulcan.process(target, function(err, inlinedHtml) { | ||
}); | ||
bundler.bundle([target]).then((bundles) => { | ||
/** | ||
* do stuff here | ||
*/ | ||
}) | ||
``` | ||
## Caveats | ||
Because HTML Imports changes the order of execution scripts can have, Vulcanize | ||
has to make a few compromises to achieve that same script execution order. | ||
1. Contents of all HTML Import documents will be moved to `<body>` | ||
1. Any scripts after a `<link rel="import">` node in `<head>` will be moved to `<body>` after the contents of the HTML Import. | ||
## What happened to [feature] from 0.X? | ||
- `--csp` mode has been moved into [crisper](https://github.com/PolymerLabs/crisper) | ||
- `--strip` mode was removed, use something like [html-minifier](https://github.com/kangax/html-minifier) or [minimize](https://github.com/Moveo/minimize) | ||
- Use these at your own risk, they may not understand all of Polymer's uses of HTML or CSS (https://github.com/kangax/html-minifier/issues/377) | ||
## What about build tools | ||
- [grunt-vulcanize](https://www.npmjs.com/package/grunt-vulcanize) | ||
- [gulp-vulcanize](https://www.npmjs.com/package/gulp-vulcanize) | ||
- [broccoli-vulcanize](https://www.npmjs.com/package/broccoli-vulcanize) | ||
[![Analytics](https://ga-beacon.appspot.com/UA-39334307-2/Polymer/vulcanize/README)](https://github.com/igrigorik/ga-beacon) |
275263
145