Neoclassical Programming Multitude

    html-build
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    html-build NPM version

    Utility script to build HTML documents - Appends scripts and styles, removes debug parts, append HTML partials, template options, etc.

    Installation

    Install this script as a dev dependency.

    $ npm install html-build --save-dev

    Usage

    CLI

    Add your build script to your package.json scripts:

    {
        //...
        "scripts": {
            "build-html": "html-build -c config.js index.html samples/"
        }
        //...
    }

    Create a configuration file (more informations):

    module.exports = {
        beautify: true,
        prefix: "//some-cdn",
        relative: true,
        basePath: false,
        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",
            layout: {
                header: "layout/header.html",
                footer: "layout/footer.html"
            }
        },
        data: {
            // Data to pass to templates
            version: "0.1.0",
            title: "test",
        }
    };

    Then run your script:

    $ npm run build-html

    Programmatically

    var htmlBuild = require("html-build");
    htmlBuild.build("index.html", "samples/", { /* config */ });

    Exemple

    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>

    Processors

    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

    Install

    npm i html-build

    DownloadsWeekly Downloads

    3

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    32.2 kB

    Total Files

    17

    Last publish

    Collaborators

    • mluce