grunt-html-fragment

A plugin for combine fragments with template into a new html file. It also with clean the style and script which is repetitive in the new html file.

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-html-fragment --save-dev

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

grunt.loadNpmTasks('grunt-html-fragment');

The "html_fragment" task

Overview

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

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

Options

options.fragmentPath

Type: String Default value: 'fragment'

A string value that is used to get all the fragment files.

options.needReplacePath

Type: Boolean Default value: true

A boolean value that is used to decided whether replace the relative source link that.

options.pathDefined

Type: Array Default value: []

A array value that is used to add your custom tag which has relative source link. you should push Object has tag and attr value like {tag:'tag',attr:'attr'}

options.absoluteHeads

Type: Array Default value: []

A array value that is used to mark the source link start with.

options.useMin

Type: Boolean Default value: false

A boolean value that is used to decided whether replace the min source link like {name}.min.js or {name}.min.css.

Usage Examples

<!-- @@include= head.html::div->addClass->title,div->addClass->name -->

It means include head.html to the html with command $('div').addClass('title') and $('div').addClass('name')

'::' means it has command.

If you just do not want use command, you can use like that:

<!-- @@include= head.html -->

Options

In this example, the default options are used to replace tag with fragment in test. it will create new html based on 'test/fixtures/123.html' and which named '123.html' into 'dest' directory.

grunt.initConfig({
  options: {
    fragmentPath:'test/fragment',
    useMin:false
  },
  html_fragment: {
    files: {
      'dest/': ['test/fixtures/123.html'],
    },
  }
});

Contributing

In lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

0.1.10 add a function about replace min source path;

0.1.7 add a function about replace relative path;

0.1.5 fixed some bugs;

0.1.3 remove the style and script which is repetitive;

0.1.1 add @@include and ::(with jquery command);