Skip to content

Using HTML as Template

Jump to bottom Edit New page
turbometalskater edited this page Dec 20, 2014 · 2 revisions

When using grunt-html-build, you can make some parts of HTML files to be processed as grunt template. You can use values from config and from htmlbuild's option's data as globals.

index.html

<html>
	<head>
		<!-- build:process -->
		<title><%= pkg.name %></title>
		<!-- /build -->
		...
	</head>
	<body>
		<p>No process here</p>
		<p><%= noprocess %></p>
		<!-- build:process -->
		<script type="text/javascript" src="/path/to/debug/lib1.js">
			var version = "<%= pkg.version %>",
				baseUrl = "<%= baseUrl %>";
		</script>
		<!-- /build -->
	</body>
</html>

Gruntfile.js

grunt.initConfig({
  pkg: grunt.file.readJSON("package.json"),

  htmlbuild: {
    dist: {
      src: 'index.html',
      dest: 'dist/',
      options: {
        data: {
          baseUrl: "http://my.prod.site.com/"
	}
      }
    }
  }
});

Result

<html>
	<head>
		<title>YourPackageName</title>
		...
	</head>
	<body>
		<p>No process here</p>
		<p><%= noprocess %></p>
		<!-- build:script libs -->
		<script type="text/javascript" src="/path/to/debug/lib1.js">
			var version = "1.0.0",
				baseUrl = "http://my.prod.site.com/";
		</script>
		<!-- /build -->
	</body>
</html>
Add a custom footer
Add a custom sidebar
Clone this wiki locally