OLD | NEW |
---|---|
1 # Vulcanizing Material Design downloads | 1 # Vulcanizing Material Design pages |
Dan Beam
2016/08/10 18:17:41
nit: Material Design * -> Chrome Polymer UIs?
tsergeant
2016/08/11 01:28:27
Done.
| |
2 | 2 |
3 `vulcanize` is an npm module used to combine resources. In order to make the | 3 `vulcanize` is an npm module used to combine resources. In order to make the |
4 Material Design downloads page sufficiently fast, we run vulcanize on the source | 4 Material Design downloads and history pages sufficiently fast, we run vulcanize |
5 files to combine them and reduce blocking load/parse time. | 5 on the source files to combine them and reduce blocking load/parse time. |
6 | 6 |
7 ## Required software | 7 ## Required software |
8 | 8 |
9 Vulcanization currently requires: | 9 Vulcanization currently requires: |
10 | 10 |
11 - node.js: >= v4.4.2 (can be found with `node --version`) | 11 - node.js: >= v4.4.2 (can be found with `node --version`) |
12 - npm: >= 1.3.10 (can be found with `npm --version`) | 12 - npm: >= 1.3.10 (can be found with `npm --version`) |
13 - vulcanize: 1.14.8 (can be found with `vulcanize --version`) | 13 - vulcanize: 1.14.8 (can be found with `vulcanize --version`) |
14 - crisper: 2.0.1 (can be found with `npm list -g crisper`) | 14 - crisper: 2.0.1 (can be found with `npm list -g crisper`) |
15 - uglifyjs: 2.4.10 (can be found with `uglifyjs --version`) | |
15 | 16 |
16 ## Installing required software | 17 ## Installing required software |
17 | 18 |
18 For instructions on installing node and npm, see | 19 For instructions on installing node and npm, see |
19 [here](https://docs.npmjs.com/getting-started/installing-node). | 20 [here](https://docs.npmjs.com/getting-started/installing-node). |
20 | 21 |
21 We recommend telling npm where to store downloaded modules: | 22 We recommend telling npm where to store downloaded modules: |
22 | 23 |
23 ```bash | 24 ```bash |
24 $ npm config set -g prefix "$HOME/node_modules" | 25 $ npm config set -g prefix "$HOME/node_modules" |
25 ``` | 26 ``` |
26 | 27 |
27 Then install `crisper` and `vulcanize` like this: | 28 Then install the required modules: |
28 | 29 |
29 ```bash | 30 ```bash |
30 $ npm install -g crisper vulcanize | 31 $ npm install -g crisper vulcanize uglifyjs |
31 ``` | 32 ``` |
32 | 33 |
33 Ultimately, all that is required to run this script is that `crisper` and | 34 Ultimately, all that is required to run this script is that `crisper`, |
34 `vulcanize` are on your `$PATH`. | 35 `vulcanize` and `uglifyjs` are on your `$PATH`. |
35 | 36 |
36 ## Combining resources with vulcanize | 37 ## Combining resources with vulcanize |
37 | 38 |
38 To combine all the CSS/HTML/JS for the downloads page to make it production | 39 To combine all the CSS/HTML/JS for all pages which use vulcanize, making them |
39 fast, you can run the commands: | 40 production fast, you can run the command: |
40 | 41 |
41 ```bash | 42 ```bash |
42 $ chrome/browser/resources/md_downloads/vulcanize.py # from src/ | 43 $ chrome/browser/resources/vulcanize.py # from src/ |
43 ``` | 44 ``` |
44 | 45 |
45 This should overwrite the following files: | 46 This should overwrite the following files: |
46 | 47 |
47 - chrome/browser/resources/md_downloads/ | 48 - chrome/browser/resources/md_downloads/ |
48 - vulcanized.html (all <link rel=import> and stylesheets inlined) | 49 - vulcanized.html (all <link rel=import> and stylesheets inlined) |
49 - crisper.js (all JavaScript, extracted from vulcanized.html) | 50 - crisper.js (all JavaScript, extracted from vulcanized.html) |
51 - chrome/browser/resources/md_history/ | |
52 - app.vulcanized.html | |
53 - app.crisper.js | |
50 | 54 |
51 ## Testing downloads without vulcanizing | 55 ## Testing downloads without vulcanizing |
52 | 56 |
53 Build with "use_vulcanize=0" in your GYP_DEFINES to build downloads without | 57 Build with `use_vulcanize = false` in your gn args to build without vulcanizing. |
54 vulcanizing. | |
OLD | NEW |