Task Options

Maxime LUCE edited this page May 16, 2016 · 6 revisions

grunt-html-build is a multi task grunt plugin, so it's possible to configure differents targets within htmlbuild tag.

Example

grunt.initConfig({
    htmlbuild: {
        dist: {
            src: 'index.html',
            dest: 'samples/',
            options: {
                beautify: true,
                scripts: {
                    bundle: [
                        'scripts/*.js',
                        '!**/main.js',
                    ],
                    main: 'scripts/main.js'
                },
                styles: {
                    bundle: [ 
                        'css/libs.css',
                        'css/dev.css'
                    ],
                    test: 'css/inline.css'
                },
                sections: {
                    views: 'views/**/*.html',
                    templates: 'templates/**/*.html',
                },
                data: {
                    // Data to pass to templates
                    version: "0.1.0",
                    title: "test",
                },
            }
        }
    }
});

src

type: string, array | required

Specify input files to build. Accept globbing patterns

dest

type: string | optional | default: './'

Specify output directory to create results in

options

type: object | required

Additional Options

options.scripts, options.styles, options.sections

type: object | required if there is scripts or styles or sections tags in html

Object representing files to be inserted into html :

Examples:

Simple configuration
scripts: {
    'name1': '/path/to/file/with/**/globbing.*.ext'
    'name2': [
        '/path/to/file/with/**/globbing.*.ext',
        '!/path/to/file/to/exclude/globbing.*.ext'
    ]
}
<!-- build:script name1 --><!-- /build -->
<!-- build:script name2 -->
<script type="text/javascript" src="/path/to/static/dev/file.js"></script>
<script type="text/javascript" src="/path/to/static/dev/module.js"></script>
<!-- /build -->
Advanced configuration
scripts: {
    'name1': {
        nocase: true,
         files: '/path/to/file/with/**/globbing.*.ext'
    },
    'name2': {
        cwd: '/path/to/file',
        files: [
            'with/**/globbing.*.ext',
            '!to/exclude/globbing.*.ext'
        ]
    }
}
<!-- build:script name1 --><!-- /build -->
<!-- build:script name2 -->
<script type="text/javascript" src="/path/to/static/dev/file.js"></script>
<script type="text/javascript" src="/path/to/static/dev/module.js"></script>
<!-- /build -->

options.prefix

type : string | optional | default: null

Append this prefix to all paths in script and style references.

options.relative

type : string | optional | default: true

Make generated path relative to dest path. If this arguments is specified with false value, generated paths will be written as you configure in your Gruntfile.

options.replace

type : bool | optional | default: false

True to replace src file instead of creating a new file.

options.keepTags

type: boolean | optional | default: false

True to keep htmlbuild special tags after HTML compilation.

options.beautify

type : bool | optional | default: false

True to beautify HTML result

options.logOptions

type : bool | optional | default: false

Log an alert in console if some optional tags are not rendered

options.allowUnknownTags

type : bool | optional | default: false

Do not fail the task if the parser meet unknown tags. Useful when working with grunt-usemin.

options.parseTag

type: string | optional | default: 'build'

Specify the html-build tag name, default is 'build'. Format : <!-- {options.parseTag}:{scripts|styles|sections|process|remove} {name} [attributes] -->