Package Exports

pull-create-html

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (pull-create-html) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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-html

Usage

`html(path?, options)`

Creates an html file from js and css file streams, with several options configure the boilerplate html.

js a stream of js files which put in <script>
css a stream of css files which get put in <style>
lang sets the <html lang=...> attribute. Defaults to en-US
title sets the <title>...</title> element
body is a string of HTML to put before where the JS is injected. e.g. a mount element for vdom
charset sets the <meta charset=...> element. Defaults to utf-8
base sets the file.base on the output HTML file
scriptAsync lets the JS files load async by setting <script async="true"> in the <head>
links Lets you specify <link> as a list of objects
meta Lets 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)