| 1 | # Crisper
|
| 2 | > Split inline scripts from an HTML file for CSP compliance
|
| 3 |
|
| 4 | ## Usage
|
| 5 |
|
| 6 | Command line usage:
|
| 7 |
|
| 8 | ```
|
| 9 | cat index.html | crisper -h build.html -j build.js
|
| 10 | crisper --source index.html --html build.html --js build.js
|
| 11 | crisper --html build.html --js build.js index.html
|
| 12 | ```
|
| 13 |
|
| 14 | The output html file will load the output js file at the top of `<head>` with a `<script defer>` element.
|
| 15 |
|
| 16 | Optional Flags:
|
| 17 |
|
| 18 | - `--script-in-head=false`
|
| 19 | - in the output HTML file, place the script at the end of `<body>`
|
| 20 | - **Note**: Only use this if you need `document.write` support.
|
| 21 | - `--only-split`
|
| 22 | - Do not write include a `<script>` tag in the output HTML
|
| 23 | file
|
| 24 | - `--always-write-script`
|
| 25 | - Always create a .js file, even without any `<script>`
|
| 26 | elements.
|
| 27 |
|
| 28 | Library usage:
|
| 29 |
|
| 30 | ```js
|
| 31 | var output = crisper({
|
| 32 | source: 'source HTML string',
|
| 33 | jsFileName: 'output js file name.js',
|
| 34 | scriptInHead: true, //default true
|
| 35 | onlySplit: false, // default false
|
| 36 | alwaysWriteScript: false // default false
|
| 37 | });
|
| 38 | fs.writeFile(htmlOutputFileName, output.html, 'utf-8', ...);
|
| 39 | fs.writeFile(jsOutputFileName, output.js, 'utf-8', ...);
|
| 40 | ```
|
| 41 |
|
| 42 | ## Usage with Vulcanize
|
| 43 |
|
| 44 | When using [vulcanize](https://github.com/Polymer/vulcanize), crisper can handle
|
| 45 | the html string output directly and write the CSP seperated files on the command
|
| 46 | line
|
| 47 |
|
| 48 | ```
|
| 49 | vulcanize index.html --inline-script | crisper --html build.html --js build.js
|
| 50 | ```
|
| 51 |
|
| 52 | Or programmatically
|
| 53 |
|
| 54 | ```js
|
| 55 | vulcanize.process('index.html', function(err, cb) {
|
| 56 | if (err) {
|
| 57 | return cb(err);
|
| 58 | } else {
|
| 59 | var out = crisper({
|
| 60 | source: html,
|
| 61 | jsFileName: 'name of js file.js',
|
| 62 | scriptInHead: true, // default true
|
| 63 | onlySplit: false, // default false
|
| 64 | alwaysWriteScript: false //default false
|
| 65 | })
|
| 66 | cb(null, out.html, out.js);
|
| 67 | }
|
| 68 | });
|
| 69 | ```
|
| 70 |
|
| 71 | ## Breaking Changes from 1.x
|
| 72 | - Deprecated `split` API was removed
|
| 73 | - `require('crisper').split()`
|
| 74 | - Default value of `script-in-head` flag changed to true
|
| 75 | - This improves load performance by parallelizing HTML and script parsing
|
| 76 | - This will break `document.write` calls
|
| 77 | - If you experience problems, you can use `--script-in-head=false` argument or
|
| 78 | `scriptInHead: false` in library usage.
|
| 79 |
|
| 80 | ## Build Tools
|
| 81 |
|
| 82 | - [gulp-crisper](https://npmjs.com/package/gulp-crisper)
|
| 83 | - [grunt-crisper](https://www.npmjs.com/package/grunt-crisper)
|