grunt-html-build
Advanced tools
Grunt HTML Builder - Appends scripts and styles, Removes debug parts, append html partials, Template options
Grunt HTML Builder - Appends scripts and styles, Removes debug parts, append html partials, Template options
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,
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: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>
</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="../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:
FAQs
Grunt HTML Builder - Appends scripts and styles, Removes debug parts, append html partials, Template options
The npm package grunt-html-build receives a total of 0 weekly downloads. As such, grunt-html-build popularity was classified as not popular.
We found that grunt-html-build demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.