0.5.6 • Published 10 years ago

grunt-contrib-html-build v0.5.6

Weekly downloads
17
License
-
Repository
github
Last release
10 years ago

grunt-contrib-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-contrib-html-build --save-dev

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

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

Then specify your config: (more informations)

grunt.initConfig({
    fixturesPath: "fixtures",
    
    components : Object.keys(grunt.file.readJSON('./bower.json').dependencies).map(
        function(prodComponent) {
            return "source/polymer/"+prodComponent+"/"+prodComponent+".html";
        }
    ),

    htmlbuild: {
        dist: {
            src: 'index.html',
            dest: 'samples/',
            options: {
                beautify: true,
                prefix: '//some-cdn',
                relative: true,
                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'
                },
                components: {
                    bundle: ['<%= components %>',
                             'source/polymer/font-roboto/roboto.html']
                },
                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 -->
    
    <!-- build:component bundle -->
    <link rel="import" href="../polymer/polymer/polymer.html" />
    <!-- /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 dist 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>
        
        <link rel="import" href="../polymer/polymer/polymer.html" />
        <link rel="import" href="../polymer/core-drawer-panel/core-drawer-panel.html" />
        <link rel="import" href="../polymer/core-header-panel/core-header-panel.html" />
        <link rel="import" href="../polymer/core-icon-button/core-icon-button.html" />
        <link rel="import" href="../polymer/core-item/core-item.html" />
        <link rel="import" href="../polymer/core-label/core-label.html" />
        <link rel="import" href="../polymer/core-menu/core-menu.html" />
        <link rel="import" href="../polymer/core-toolbar/core-toolbar.html" />
        <link rel="import" href="../polymer/paper-button/paper-button.html" />
        <link rel="import" href="../polymer/paper-input/paper-input.html" />
        <link rel="import" href="../polymer/paper-shadow/paper-shadow.html" />
        <link rel="import" href="../polymer/paper-spinner/paper-spinner.html" />
        <link rel="import" href="../polymer/paper-toast/paper-toast.html" />
        <link rel="import" href="../polymer/font-roboto/roboto.html" />
    
    </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 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 * Adding automatically generation link import tag for polymerJS dependencies.
gruntplugingrunthtmlbuildhtmlbuildhtmlgengeneratelink
js-beautify
@infinitebrahmanuniverse/nolb-grunt-c@everything-registry/sub-chunk-1793
0.5.6

10 years ago

0.5.5

10 years ago

0.5.3

10 years ago

0.5.2

10 years ago

0.5.1

10 years ago