🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →

grunt-html-build

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

grunt-html-build

Grunt HTML Builder - Appends scripts and styles, Removes debug parts, append html partials, Template options

0.7.1

latest

Source

npm

Version published: 8 years ago

Weekly downloads: 4.2K

Maintainers: 1

Weekly downloads

Created: 12 years ago

Source

grunt-html-build

Grunt HTML Builder - Appends scripts and styles, Removes debug parts, append html partials, Template options

Getting Started

Install this grunt plugin next to your project's gruntfile with: npm install grunt-html-build --save-dev

Then add this line to your project's Gruntfile.js :

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

Then specify your config: (more informations)

grunt.initConfig({
    fixturesPath: "fixtures",

    htmlbuild: {
        dist: {
            src: 'index.html',
            dest: 'samples/',
            options: {
                beautify: true,
                prefix: '//some-cdn',
                relative: true,
                basePath: false,
                scripts: {
                    bundle: [
                        '<%= fixturesPath %>/scripts/*.js',
                        '!**/main.js',
                    ],
                    main: '<%= fixturesPath %>/scripts/main.js'
                },
                styles: {
                    bundle: [
                        '<%= fixturesPath %>/css/libs.css',
                        '<%= fixturesPath %>/css/dev.css'
                    ],
                    test: '<%= fixturesPath %>/css/inline.css'
                },
                sections: {
                    views: '<%= fixturesPath %>/views/**/*.html',
                    templates: '<%= fixturesPath %>/templates/**/*.html',
                    layout: {
                        header: '<%= fixturesPath %>/layout/header.html',
                        footer: '<%= fixturesPath %>/layout/footer.html'
                    }
                },
                data: {
                    // Data to pass to templates
                    version: "0.1.0",
                    title: "test",
                },
            }
        }
    }
});

Using the configuration above, consider the following example html to see it in action:

<html>
<head>
    <title>grunt-html-build - Test Page</title>
    <!-- build:style bundle -->
    <link rel="stylesheet" type="text/css" href="/path/to/css/dev.css" />
    <!-- /build -->
    <!-- build:style inline test -->
    <link rel="stylesheet" type="text/css" href="/path/to/css/dev-inline.css" />
    <!-- /build -->
</head>
<body id="landing-page">
    <!-- build:section layout.header -->
    <!-- /build -->

    <!-- build:section recursive views -->
    <!-- /build -->

    <!-- build:section layout.footer -->
    <!-- /build -->

    <!-- build:remove -->
    <script type="text/javascript" src="/path/to/js/only-dev.js"></script>
    <!-- /build -->
    
    <!-- build:remove dev -->
    <script type="text/javascript" src="/path/analytics.js"></script>
    <!-- /build -->

    <!-- build:script bundle -->
    <script type="text/javascript" src="/path/to/js/libs/jquery.js"></script>
    <script type="text/javascript" src="/path/to/js/libs/knockout.js"></script>
    <script type="text/javascript" src="/path/to/js/libs/underscore.js"></script>
    <script type="text/javascript" src="/path/to/js/app/module1.js"></script>
    <script type="text/javascript" src="/path/to/js/app/module2.js"></script>
    <!-- /build -->
    <!-- build:process -->
    <script type="text/javascript">
        var version = "<%= version %>",
            title = "<%= title %>";
    </script>
    <!-- /build -->
    <!-- build:script inline main -->
    <script type="text/javascript">
        main();
    </script>
    <!-- /build -->
    <!-- build:script inline noprocess main -->
    <script type="text/javascript">
        main();
    </script>
    <!-- /build -->

    <!-- build:section optional test -->
    <!-- /build -->
</body>
</html>

After running the grunt task it will be stored on the samples folder as

<html>
    <head>
        <title>grunt-html-build - Test Page</title>
        <link type="text/css" rel="stylesheet" href="../fixtures/css/libs.css" />
        <link type="text/css" rel="stylesheet" href="../fixtures/css/dev.css" />
        <style>
            .this-is-inline {
                font-weight: bold;
            }
        </style>
    </head>
    <body id="landing-page">
        <header>...</header>
        <div id="view1">...</div>
        <div id="view2">...</div>
        <div id="view3">...</div>
        <footer>...</footer>
        <script type="text/javascript" src="/path/analytics.js"></script>
        <script type="text/javascript" src="../fixtures/scripts/app.js"></script>
        <script type="text/javascript" src="../fixtures/scripts/libs.js"></script>
        <script type="text/javascript">
            var version = "0.1.0",
                title = "test";
        </script>

        <script type="text/javascript">
            var version = "0.1.0";
            productionMain();
        </script>
        <script type="text/javascript">
            var version = "<%= version %>";
            productionMain();
        </script>
    </body>
</html>

There 5 types of processors:

script
- append script reference from configuration to dest file.
style
- append style reference from configuration to dest file.
section
- append partials from configuration to dest file.
process
- process grunt template on the block.
remove
- it will erase the whole block.

Release History

0.1.0 Initial Release
0.1.1 Cleaning, adding optional tags, using js-beautify
0.1.2 Adding expand options to tags paths and write docs
0.1.3 Fixing nodejs dependencies
0.1.4 Fixing nodejs dependencies
0.1.5 Optimize src loop / Fix js-beautify options
0.1.6 Allow build tag customization
0.2.0
- Fix and optimisation
- Allow replacing src file by built file
- Allow filename in dest path
- Allow prefixing src files
0.2.1 Allow non relative file names + per file tag parameter
0.2.2 Fix issue in options.relative
0.3.0
- Fix issue when building multiple html files using custom file globbing
- Allow sub parameters in all options paths
0.3.1
- Fix issue when using prefix on Windows environment
0.3.2
- Update js-beautify dependency to 1.4.2
- Remove peerDependencies to avoid versions conflict
0.4.0
- Fix bug in prefix option
- Allow recursive build using section processor
0.4.1
- Fix prefix's ability to contain //, as in https://
- Add a new recursive option which can be added to section tag.
0.4.2
- Fix relative path error since 0.4.0
- Add noprocess option to tags to avoid underscore processing issues.
0.4.3
- Allow remove task to be configured by using current target.
0.5.0
- Avoid javascript errors when parsing unknown tags.
- Add an allowUnknownTags option to ignore unknown tags without failing the task.
- Allow to specify attributes on script and styles tags.
- Allow http, https or // links to be processed as links.
- Automatically adapt generated link tag for less files.
0.5.1
- Fix issue in linefeed simplification
0.5.2
- Fix issue in relative path management
- Remove deprecated undercore reference and replace by lodash dependency
- Fix deep array flattening for Node.JS >= 4
0.6.0
- Add keepTags option to keep htmlbuild tags after build.
- Fix broken inlining for scripts containing $x.
- Upgrade lodash to v4 and fix template issue.
- Ensure grunt v1.0.0 compatibility.
0.6.1
- Optimize some code parts.
- Added option basePath allow keeping original folder structure.
0.6.2
- Fix some issues.
0.7.0
- Fix EOL inconsistent issue.
- Add suffix option to customize files query parameters (for cache).

Keywords

FAQs

What is grunt-html-build?

Is grunt-html-build popular?

Is grunt-html-build well maintained?

Package last updated on 24 Apr 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install