| OLD | NEW |
|---|
| (Empty) | |
| 1 [](https://npmjs.org/pa
ckage/vulcanize) |
| 2 [](https://tr
avis-ci.org/Polymer/vulcanize) |
| 3 |
| 4 # Vulcanize |
| 5 |
| 6 ### Concatenate a set of Web Components into one file |
| 7 |
| 8 >Named for the [Vulcanization](http://en.wikipedia.org/wiki/Vulcanization) proce
ss that turns polymers into more durable |
| 9 materials. |
| 10 |
| 11 ## Installation |
| 12 |
| 13 `vulcanize` is available on npm. For maximium utility, `vulcanize` should be ins
talled globally. |
| 14 |
| 15 sudo npm install -g vulcanize |
| 16 |
| 17 This will install `vulcanize` to `/usr/local/bin/vulcanize`. |
| 18 |
| 19 ## Usage |
| 20 |
| 21 vulcanize index.html |
| 22 |
| 23 At the simplest, `vulcanize` only requires an html file as an argument. The opti
mized output file will be named |
| 24 `vulcanized.html`. |
| 25 |
| 26 If you want to control the output name, use the `-o` flag |
| 27 |
| 28 vulcanize -o build.html index.html |
| 29 |
| 30 Most URLs will be automatically adjusted by the vulcanizer. |
| 31 |
| 32 |
| 33 ## Options |
| 34 |
| 35 - `--output`, `-o` |
| 36 - Output file name (defaults to vulcanized.html) |
| 37 - `--verbose`, `-v` |
| 38 - More verbose logging |
| 39 - `--help`, `-v`, `-?` |
| 40 - Print this message |
| 41 - `--config` |
| 42 - Read a given config file |
| 43 - `--strip`, `-s` |
| 44 - Remove comments and empty text nodes |
| 45 - `--csp` |
| 46 - Extract inline scripts to a separate file (uses `<output file name>`.js) |
| 47 - `--inline` |
| 48 - The opposite of CSP mode, inline all assets (script and css) into the docume
nt |
| 49 - `--inline --csp` |
| 50 - Bundle all javascript (inline and external) into `<output file name>`.js |
| 51 - `--abspath`, `-p` |
| 52 - Specify site root. Resolve paths to absolute paths based on site root |
| 53 - `--no-strip-excludes` |
| 54 - Keep imports excluded from inlining |
| 55 - `--version`, ` -V` |
| 56 - print version information |
| 57 |
| 58 ## Additional options when used as Node module |
| 59 |
| 60 In addition to the above options, `vulcan` when used as Node module has addition
al options for string-based rather than file-based document processing. These ar
e: |
| 61 |
| 62 - `inputSrc` |
| 63 - The document to process, represented as String, String Buffer, or any Object
with a `toString` function that yields valid HTML souce. Imports are resolved r
elative to the directory in which the node process was started. |
| 64 - `outputHandler` |
| 65 - An output handler function to call rather than writing the processing result
to file. The handler must be of the form `function(filename, data)`, which is c
alled with the following arguments: |
| 66 - `filename` |
| 67 - The file that vulcanize would create if it were running in file I/O mode
. |
| 68 - `data` |
| 69 - The HTML source that vulcanize writes to file if no outputhandler is use
d. |
| 70 |
| 71 An example of using these options is shown below: |
| 72 |
| 73 ``` |
| 74 var vulcan = require("./lib/vulcan"); |
| 75 |
| 76 var head = "<head><link rel='import' href='test/html/imports/simple-import.html'
></head>"; |
| 77 var body = "<body><my-element>test</my-element></body>"; |
| 78 var input = "<!doctype><html>" + head + body + "</html>"; |
| 79 |
| 80 var outputHandler = function(filename, data) { |
| 81 console.log(data); |
| 82 }; |
| 83 |
| 84 vulcan.setOptions({inputSrc: input, outputHandler: outputHandler}, function(err)
{ |
| 85 if(err) { |
| 86 console.error(err); |
| 87 process.exit(1); |
| 88 } |
| 89 vulcan.processDocument(); |
| 90 }); |
| 91 |
| 92 ``` |
| 93 |
| 94 ## Config |
| 95 > JSON file for additional options |
| 96 |
| 97 - Excludes: Remove the selected urls from the vulcanized bundle: |
| 98 |
| 99 ### Example Config |
| 100 ```json |
| 101 { |
| 102 "excludes": { |
| 103 "imports": [ |
| 104 "regex-to-exclude" |
| 105 ] |
| 106 } |
| 107 } |
| 108 ``` |
| 109 |
| 110 ## Example Usage |
| 111 |
| 112 Say we have three html files: `index.html`, `x-app.html`, and `x-dep.html`. |
| 113 |
| 114 index.html: |
| 115 |
| 116 ```html |
| 117 <!DOCTYPE html> |
| 118 <link rel="import" href="x-app.html"> |
| 119 <x-app></x-app> |
| 120 ``` |
| 121 |
| 122 x-app.html: |
| 123 |
| 124 ```html |
| 125 <link rel="import" href="path/to/x-dep.html"> |
| 126 <polymer-element name="x-app"> |
| 127 <template> |
| 128 <x-dep></x-dep> |
| 129 </template> |
| 130 <script>Polymer('x-app')</script> |
| 131 </polymer-element> |
| 132 ``` |
| 133 |
| 134 x-dep.html: |
| 135 |
| 136 ```html |
| 137 <polymer-element name="x-dep"> |
| 138 <template> |
| 139 <img src="x-dep-icon.jpg"> |
| 140 </template> |
| 141 <script> |
| 142 Polymer('x-dep'); |
| 143 </script> |
| 144 </polymer-element> |
| 145 ``` |
| 146 |
| 147 Running vulcan on `index.html`, and specifying `build.html` as the output: |
| 148 |
| 149 vulcanize -o build.html index.html |
| 150 |
| 151 Will result in `build.html` that appears as so: |
| 152 |
| 153 ```html |
| 154 <!DOCTYPE html> |
| 155 <div hidden><polymer-element name="x-dep" assetpath="path/to/"> |
| 156 <template> |
| 157 <img src="http://www.polymer-project.org/images/logos/p-logo.svg"> |
| 158 </template> |
| 159 <script> |
| 160 Polymer('x-dep'); |
| 161 </script> |
| 162 </polymer-element> |
| 163 |
| 164 <polymer-element name="x-app" assetpath=""> |
| 165 <template> |
| 166 <x-dep></x-dep> |
| 167 </template> |
| 168 <script>Polymer('x-app')</script> |
| 169 </polymer-element> |
| 170 </div> |
| 171 <x-app></x-app> |
| 172 ``` |
| 173 |
| 174 ## Content Security Policy |
| 175 [Content Security Policy](http://en.wikipedia.org/wiki/Content_Security_Policy),
or CSP, is a Javascript security model |
| 176 that aims to prevent XSS and other attacks. In so doing, it prohibits the use of
inline scripts. |
| 177 |
| 178 To help automate the use of Polymer element registration with CSP, the `--csp` f
lag to vulcan will remove all scripts |
| 179 from the HTML Imports and place their contents into an output javascript file. |
| 180 |
| 181 Using the previous example, the output from `vulcanize --csp -o build.html index
.html` will be |
| 182 |
| 183 build.html: |
| 184 ```html |
| 185 <!DOCTYPE html> |
| 186 <div hidden><polymer-element name="x-dep" assetpath="path/to/"> |
| 187 <template> |
| 188 <img src="http://www.polymer-project.org/images/logos/p-logo.svg"> |
| 189 </template> |
| 190 |
| 191 </polymer-element> |
| 192 |
| 193 <polymer-element name="x-app" assetpath=""> |
| 194 <template> |
| 195 <x-dep></x-dep> |
| 196 </template> |
| 197 |
| 198 </polymer-element> |
| 199 </div> |
| 200 <x-app></x-app> |
| 201 <script src="build.js"></script> |
| 202 ``` |
| 203 |
| 204 build.js: |
| 205 ```js |
| 206 |
| 207 Polymer('x-dep'); |
| 208 ; |
| 209 Polymer('x-app') |
| 210 ``` |
| 211 |
| 212 The JS files can become a bit messy without reformatting, and semi-colons are in
serted between script contents as a |
| 213 precaution. |
| 214 |
| 215 ## Stripping whitespace |
| 216 |
| 217 Vulcanize includes a set of size reducing heuristics to remove unnecessary white
space and comments in HTML, JS, and CSS. |
| 218 This can be activated by using the `--strip` option. |
| 219 |
| 220 Using the previous example, the output from `vulcanize --csp -o build.html --str
ip index.html` will be |
| 221 |
| 222 build.html: |
| 223 ```html |
| 224 <!DOCTYPE html> |
| 225 <div hidden><polymer-element name="x-dep" assetpath="path/to/"><template><img sr
c="http://www.polymer-project.org/images/logos/p-logo.svg"></template></polymer-
element><polymer-element name="x-app" assetpath=""><template><x-dep></x-dep></te
mplate></polymer-element></div> |
| 226 <x-app></x-app> |
| 227 <script src="build.js"></script> |
| 228 ``` |
| 229 |
| 230 ```js |
| 231 Polymer("x-dep");Polymer("x-app"); |
| 232 ``` |
| 233 |
| 234 [](https://github.com/igrigorik/ga-beacon) |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 800513006:
Added vulcanize under third_party/npm_modules (Closed)
Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master