Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Linking Scripts and Styles

Maxime LUCE edited this page · 4 revisions


When using grunt-html-build, you can generate a HTML page which replace debug scripts and style links by production ones.

Let's take an application directory like this :

  • app
    • module1.js
    • module2.js
  • libs
    • lib1.js
    • lib2.js
  • css
    • lib1.css
    • lib2.css
    • app.css
  • main.js
  • index.html


        <!-- build:style libs -->
        <link type="text/css" rel="stylesheet" href="/path/to/debug/lib1.css" />
        <link type="text/css" rel="stylesheet" href="/path/to/debug/lib2.css" />
        <!-- /build -->
        <!-- build:style inline app [media="screen and (max-width: 480px)"] -->
        <link type="text/css" rel="stylesheet" href="/path/to/debug/app.css" />
        <!-- /build -->
        <!-- build:script libs -->
        <script type="text/javascript" src="/path/to/debug/lib1.js"></script>
        <script type="text/javascript" src="/path/to/debug/lib2.js"></script>
        <!-- /build -->
        <!-- build:script app -->
        <script type="text/javascript" src="/path/to/debug/module1.js"></script>
        <script type="text/javascript" src="/path/to/debug/module2.js"></script>
        <!-- /build -->
        <!-- build:script main [defer] -->
        <!-- /build -->
        <!-- build:script inline main -->
        <script type="text/javascript">
        <!-- /build -->
                <!-- build:script inline noprocess main -->
        <script type="text/javascript">
        <!-- /build -->



    htmlbuild: {
        src: 'index.html',
        dest: 'dist/',
        options: {
            scripts: {
                libs: 'libs/*.js',
                app: 'app/*.js',
                main: 'main.js'
            styles: {
                libs: [ 
                app: 'css/app.css'


After grunt build, created index.html will contains links to files specified in options.

        <link type="text/css" rel="stylesheet" href="css/lib1.css" />
        <link type="text/css" rel="stylesheet" href="css/lib2.css" />
        <style media="screen and (max-width: 480px)">
            .content-of-app.css {}
        <script type="text/javascript" src="libs/lib1.js"></script>
        <script type="text/javascript" src="libs/lib2.js"></script>
        <script type="text/javascript" src="app/module1.js"></script>
        <script type="text/javascript" src="app/module2.js"></script>
        <script type="text/javascript" src="app/main.js" defer></script>
        <script type="text/javascript">
            // content of main.js
        <script type="text/javascript">
            // content of main.js without underscore templating.
                        // <%= %> tags will not be parsed.
                        // Useful when trying to include inlined version of lodash or underscore

Tag options

  • optional: Specifies that the tag can be omited from configuration. If not specified and no configuration exists for this particular tag. The task will fail.
  • inline: Specifies that the tag must render the content of files directly in the resulting HTML.
  • noprocess: Specifies that the tag content must not be processed by grunt.js templating engine. Must be used with inline.
  • [attributes]: Specifies attributes that will be added to the resultings tags.
Something went wrong with that request. Please try again.