Load Config

Autoload Config for PostHTML

Install

npm i -D posthtml-load-config

Usage

npm i -S|-D posthtml-plugin posthtml-plugin ...

Install plugins and save them to your package.json

package.json

Create a posthtml section in package.json.

Root
|– client
|– public
|
|- package.json

{
"posthtml": {
"parser": "posthtml-sugarml",
"from": "/path/to/src/file.sml",
"to": "/path/to/dest/file.html",
"plugins": {
"posthtml-plugin": {}
}
}
}

.posthtmlrc

Create a .posthtmlrc file.

Root
|– client
|– public
|
|-.posthtmlrc
|- package.json

{
"parser": "posthtml-sugarml",
"from": "/path/to/src/file.sml",
"to": "/path/to/dest/file.html",
"plugins": {
"posthtml-plugin": {}
}
}

posthtml.config.js

Create a posthtml.config.js file.

Root
|– client
|– public
|
|- posthtml.config.js
|- package.json

module.exports=(ctx)=>{return{parser: ctx.ext==='.sml' ? 'posthtml-sugarml' : false,from: ctx.from,to: ctx.to,plugins: {'posthtml-plugin': ctx.plugin}}}

Plugins can be loaded either using an {Object} or an {Array} in config.plugins.

{Object}

module.exports=(ctx)=>{return{
...options,plugins: {'posthtml-plugin': ctx.plugin}}}

{Array}

module.exports=(ctx)=>{return{
...options,plugins: [require('posthtml-plugin')(ctx.plugin)]}}

⚠️ When using an Array, make sure to require() them.

Options

parser:

parser: 'posthtml-sugarml'

from:

from: 'path/to/src/file.sml'

to:

to: 'path/to/dest/file.html'

render:

render: 'posthtml-jsx'

Plugins

Options

{} || null: Plugin loads with defaults.

'posthtml-plugin': {}||null

⚠️{} must be an empty object

[Object]: Plugin loads with given options.

'posthtml-plugin': {option: '',option: ''}

false: Plugin will not be loaded.

'posthtml-plugin': false

Order

Plugin order is determined by declaration in the plugins section.

{plugins: {'posthtml-plugin': {},// plugins[0]'posthtml-plugin': {},// plugins[1]'posthtml-plugin': {}// plugins[2]}}

Context

When using a function (posthtml.config.js), it is possible to pass context to posthtml-load-config, which will be evaluated while loading your config. By default ctx.env (process.env.NODE_ENV) and ctx.cwd (process.cwd()) are available.

Examples

posthtml.config.js

module.exports=(ctx)=>({parser: ctx.ext==='.sml' ? 'posthtml-sugarml' : false,from: ctx.from,to: ctx.to,plugins: {posthtml-include: {},posthtml-expressions: {locals: ctx.locals},htmlnano: ctx.env==='production' ? {} : false}})

"scripts": {
"build": "NODE_ENV=production node posthtml",
"start": "NODE_ENV=development node posthtml"
}

import{readFileSync}=require('fs')constposthtml=require('posthtml')constposthtmlrc=require('posthtml-load-config')constsml=readFileSync('index.sml','utf8')constctx={ext: '.sml'}posthtmlrc(ctx).then(({ plugins, options })=>{posthtml(plugins).process(sml,options).then((result)=>console.log(result.html))})

npm i -D gulp-posthtml

package.json

"scripts": {
"build": "NODE_ENV=production gulp",
"start": "NODE_ENV=development gulp"
}

gulpfile.js

import{task,src,dest}from'gulp'importpluginsfrom'gulp-load-plugins'task('pug',()=>{constctx={locals: {}}returnsrc('src/*.pug').pipe(posthtml(ctx)).pipe(rename({ext: '.html'})).pipe(dest('dest'))})task('sml',()=>{returnsrc('src/*.sml').pipe(posthtml()).pipe(rename({ext: '.html'})).pipe(dest('dest'))})task('html',()=>{returnsrc('src/*.html').pipe(posthtml()).pipe(dest('dest'))})

npm i -D html-loader posthtml-loader

package.json

"scripts": {
"build": "NODE_ENV=production webpack",
"start": "NODE_ENV=development webpack-dev-server"
}

webpack.config.js

module.exports=(env)=>{module: {rules: [{test: /\.html$/use: ['html-loader','posthtml-loader']}]}}

Maintainer

Michael Ciniawsky

Contributors