Pull-create-html NPM

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)

jamen pull-stream pull-build-tools html create boilerplate

h2ml pull-cat pull-concat-files pull-stream

@infinitebrahmanuniverse/nolb-pul @everything-registry/sub-chunk-2492 @zalastax/nolb-pul

8 years ago

8 years ago

8 years ago

8 years ago