pull-create-html
Create an html file from js and css file streams
A stream that produces a html pull-stream file with optional settings such as a title, various meta options, js and css content streams, and a body, etc.
var pull = require('pull-stream')
var { read, write } = require('pull-files')
var bundle = require('pull-bundle-js')
var html = require('pull-create-html')
var js = pull(
read(__dirname + '/lib/index.js'),
bundle([ ...transforms ])
)
var css = pull(
read(__dirname + '/style/**/*.sass'),
sass()
)
// Create html from meta options + the js and css file streams
pull(
html('foo.html', {
// Meta options
title: 'foo',
body: '<div clas="app"></div>',
meta: [
{ name: 'description', content: 'Example' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=0' }
]
// File streams
js,
css
}),
write(__dirname + '/out', err => {
// Finished
})
)Install
npm i pull-create-htmlUsage
html(path?, options)
Creates an html file from js and css file streams, with several options configure the boilerplate html.
-
jsa stream of js files which put in<script> -
cssa stream of css files which get put in<style> -
langsets the<html lang=...>attribute. Defaults toen-US -
titlesets the<title>...</title>element -
bodyis a string of HTML to put before where the JS is injected. e.g. a mount element for vdom -
charsetsets the<meta charset=...>element. Defaults toutf-8 -
basesets thefile.baseon the output HTML file -
scriptAsynclets the JS files load async by setting<script async="true">in the<head> -
linksLets you specify<link>as a list of objects -
metaLets you specify<meta>as a list of objects
Files in the js/css stream are concatenated together. Allows streaming a directory of plain css files, for example.
pull(
html('app.html', {
title: 'Example site',
js: pull(
read(__dirname + '/lib/index.js'),
bundle([ ...transforms ])
),
css: pull(
read(__dirname + '/style/index.sass'),
sass()
)
}),
write(__dirname + '/out', err => {
// Finished
})
)For using options.links, you specify a list of objects:
links: [
{ href: 'foo.css', type: 'text/css', rel: 'stylesheet' }
// ...
]Likewise with options.meta:
meta: [
{ name: 'description', content: 'Foo bar baz!' },
{ name: 'keywords', content: 'example, test, foo, bar' },
// ...
]Also see
Maintained by Jamen Marz (See on Twitter and GitHub for questions & updates)