grunt-processhtml
Advanced tools
Process html files at build time to modify them depending on the release environment
Process html files at build time to modify them depending on the release environment
This plugin requires Grunt ~0.4.1
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-processhtml --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-processhtml');
Process html files with special comments:
<!-- build:<type>[:target] [value] -->
...
<!-- /build -->
dist. Is supported for all types, so you can
always specify the target if needed.<!--
Change only the path of the src attribute and keep the original src filename.
This will replace the src path of many script tags if inside the build comment block.
-->
<!-- build:[src] js/ -->
<script src="my/deep/development/path/script.js"></script>
<!-- /build -->
<!-- this will change only the path to -->
<script src="js/script.js"></script>
<!-- build:remove -->
<p>This will be removed when any process is done</p>
<!-- /build -->
<!-- build:dist:remove -->
<p>But this one only when doing processhtml:dist</p>
<!-- /build -->
<!-- build:css style.min.css -->
<link rel="stylesheet" href="path/to/normalize.css">
<link rel="stylesheet" href="path/to/main.css">
<!-- /build -->
<!-- when any process done will change to -->
<link rel="stylesheet" href="style.min.css">
<!-- build:template
<p>Hello, <%= name %></p>
/build -->
<!--
notice that the template block is commented
to prevent breaking the html file and keeping it functional
-->
In your project's Gruntfile, add a section named processhtml to the data object passed into grunt.initConfig().
grunt.initConfig({
processhtml: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
})
Type: Boolean
Default value: false
Process the entire html file through grunt.template.process, a default object with the buld target will be passed to the
template in the form of {environment: target} where environment will be the build target of the grunt task.
Important note: The process option is not needed if you don't want to process the entire html file. See the example
below to see that you can have templates blocks to be processed.
If you do wan't to process the whole file as a template, it will be compiled after compiling the inside template blocks if any.
Type: Object
Default value: {environment: target}
An object data that is passed to the html file used to compile all template blocks and the entire file if process
is true.
If a custom object is passed as data, this will be merged with the default to keep the environment key intact.
Set the task in your grunt file which is going to process the index.html file and save the output to
dest/index.html
grunt.initConfig({
processhtml: {
options: {
data: {
message: 'Hello world!'
}
},
files: {
'dest/index.html': ['index.html']
}
}
});
Following the previous task configuration, the index.html could look like this:
<!doctype html>
<title>title</title>
<!-- build:[href] img/ -->
<link rel="apple-touch-icon-precomposed" href="my/theme/img/apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="my/theme/img/apple-touch-icon-72x72-precomposed.png" sizes="72x72">
<!-- /build -->
<!-- build:css style.min.css -->
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
<!-- /build -->
<!-- build:template
<p><%= message %></p>
/build -->
<!-- build:remove -->
<p>This is the html file without being processed</p>
<!-- remove -->
<!-- build:js app.min.js -->
<script src="js/libs/require.js" data-main="js/config.js"></script>
<!-- /build -->
After processing this file, the output will be:
<!doctype html>
<title>title</title>
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-72x72-precomposed.png" sizes="72x72">
<link rel="stylesheet" href="style.min.css">
<p>Hello world!</p>
<script src="app.min.js"></script>
In this example there are multiple targets where we can process the html file depending on which target is being run.
grunt.initConfig({
processhtml: {
dev: {
options: {
data: {
message: 'This is development environment'
}
},
files: {
'dest/index.html': ['index.html']
}
},
dist: {
options: {
process: true
data: {
title: 'My app',
message: 'This is production distribution'
}
}
}
}
});
The html to be processed:
<!doctype html>
<!-- notice that no special comment is used here, as process is true.
if you don't mine having <%= title %> as the title of your app
when not being processed, is a perfectly valid title string -->
<title><%= title %></title>
<!-- build:css style.min.css -->
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
<!-- /build -->
<!-- build:template
<p><%= message %></p>
/build -->
<!-- build:remove -->
<p>This is the html file without being processed</p>
<!-- remove -->
<!-- build:dist:remove -->
<script src="js/libs/require.js" data-main="js/config.js"></script>
<!-- -->
<!-- build:template
<% if (environment === 'dev') { %>
<script src="app.js"></script>
<% } else { %>
<script src="app.min.js"></script>
<% } %>
/build -->
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
FAQs
Process html files at build time to modify them depending on the release environment
The npm package grunt-processhtml receives a total of 1,400 weekly downloads. As such, grunt-processhtml popularity was classified as popular.
We found that grunt-processhtml 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.