grunt-posthtml

grunt-posthtml

PostHTML Grunt Plugin

Getting Started

This plugin requires Grunt ~0.4.5

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-posthtml --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-posthtml');

The "posthtml" task

grunt-posthtml is a Grunt wrapper for the PostHTML plugin

Overview

In your project's Gruntfile, add a section named posthtml to the data object passed into grunt.initConfig().

grunt.initConfig({
  posthtml: {
    options: {
      // Task-specific options go here.
    },
    your_target: {
      // Target-specific file lists and/or options go here.
    },
  },
});

Here is an example of a configuration with three different plugins:

  posthtml: {
      options: {
        use: [
          require('posthtml-head-elements')({headElements: 'test/config/head.json'}),
          require('posthtml-doctype')({doctype: 'HTML 5'}),
          require('posthtml-include')({encoding: 'utf-8'})
        ]
      },
      build: {
        files: [{
          expand: true,
          dot: true,
          cwd: 'test/html/',
          src: ['*.html'],
          dest: 'test/tmp/'
        }]
      }
    }

Alternatively you can use static mapping if you only want to access a single file:

 posthtml: {
      options: {
        use: [
          require('posthtml-head-elements')({headElements: 'test/config/head.json'}),
          require('posthtml-doctype')({doctype: 'HTML 5'}),
          require('posthtml-include')({encoding: 'utf-8'})
        ]
      },
      single: {
        files: [
          {src: 'test/html2/single.html', dest: 'test/tmp/single.html'}
        ]
      }
    },

If you are using template strings to add a file path to a PostHTML plugin, then you will need to resolve the path in your Gruntfile configuration. As an example, instead of using this configuration:

 posthtml: {
     options: {
         use: [
             require('posthtml-head-elements')({
                 headElements: '<%= yeoman.dist %>/config/head_elements.json'
             }),
             require('posthtml-doctype')({
                 doctype: 'HTML 5'
             })
         ]
     },
     build: {
         files: [{
             src: '<%= yeoman.dist %>/index.html',
             dest: '<%= yeoman.dist %>/index.html'
         }]
     }
 }

You will need to write the path like this:

posthtml: {
    options: {
        use: [
            require('posthtml-head-elements')({
                headElements: path.resolve(__dirname, yeomanConfig.app) + '/config/head_elements.json'
            }),
            require('posthtml-doctype')({
                doctype: 'HTML 5'
            })
        ]
    },
    build: {
        files: [{
            src: '<%= yeoman.dist %>/index.html',
            dest: '<%= yeoman.dist %>/index.html'
        }]
    }

Options

Apart from 'use', which is an array of PostHTML plugins, the others options are singleTags, closingSingleTag, skipParse and sync. The values and purpose of these options is exactly the same as in the parent PostHTML plugin

Release History

• 2015-11-26 v0.3.0 First release on npm.com

• 2015-11-26   v0.1.2-beta.0   Initial release

• 2018-05-09 v1.0.0 Updated all dependencies, devDependencies and peerDependencies