Parse build blocks in HTML files to replace references
Extracted from the grunt plugin grunt-useref.
npm install useref
var useref = require('useref');
var result = useref(inputHtml);
// result = [ replacedHtml, { type: { path: { 'assets': [ replacedFiles] }}} ]
Blocks are expressed as:
<!-- build:<type>(alternate search path) <path> <parameters> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
js, css or removerel="stylesheet" attribute is added to css link tag, your can overwrite it by passing your own rel parameter, e.g. rel="preload"An example of this in completed form can be seen below:
<html>
<head>
<!-- build:css css/combined.css -->
<link href="css/one.css" rel="stylesheet">
<link href="css/two.css" rel="stylesheet">
<!-- endbuild -->
</head>
<body>
<!-- build:js scripts/combined.js -->
<script type="text/javascript" src="scripts/one.js"></script>
<script type="text/javascript" src="scripts/two.js"></script>
<!-- endbuild -->
<!-- build:js scripts/async.js async data-foo="bar" -->
<script type="text/javascript" src="scripts/three.js"></script>
<script type="text/javascript" src="scripts/four.js"></script>
<!-- endbuild -->
</body>
</html>
The module would be used with the above sample HTML as follows:
var result = useref(sampleHtml);
// [
// resultHtml,
// {
// css: {
// 'css/combined.css': {
// 'assets': [ 'css/one.css', 'css/two.css' ]
// }
// },
// js: {
// 'scripts/combined.js': {
// 'assets': [ 'scripts/one.js', 'scripts/two.js' ]
// },
// 'scripts/async.js': {
// 'assets': [ 'scripts/three.js', 'scripts/four.js' ]
// }
// }
// }
// ]
The resulting HTML would be:
<html>
<head>
<link rel="stylesheet" href="css/combined.css"/>
</head>
<body>
<script src="scripts/combined.js"></script>
<script src="scripts/async.js" async data-foo="bar" ></script>
</body>
</html>
Internet Explorer Conditional Comments are preserved. The code below:
<!-- build:js scripts/combined.js -->
<!--[if lt IE 9]>
<script type="text/javascript" src="scripts/this.js"></script>
<script type="text/javascript" src="scripts/that.js"></script>
<![endif]-->
<!-- endbuild -->
Results in:
<!--[if lt IE 9]>
<script src="scripts/combined.js"></script>
<![endif]-->
Sometimes you need a bit more. If you would like to do custom processing, this is possible with a custom block, as demonstrated below.
<!-- build:import components -->
<link rel="import" href="/bower_components/some/path"></link>
<!-- endbuild -->
With
var useref = require('useref');
var result = useref(inputHtml, {
// each property corresponds to any blocks with the same name, e.g. "build:import"
import: function (content, target, options, alternateSearchPath) {
// do something with `content` and return the desired HTML to replace the block content
return content.replace('bower_components', target);
}
});
Becomes
<link rel="import" href="/components/some/path"></link>
The handler function gets the following arguments:
Include a handler for each custom block type.
Works with the symfony2 assetic and laravel asset and elixir links in twig or blade or html or php.
<!-- build:js scripts/combined.js -->
<script src="{{ asset('symfony/js/script.js') }}"></script>
<script src="{{ elixir('laravel/js/script.js') }}"></script>
<!-- endbuild -->
Type: Boolean
Default: false
Strips out build comments but leaves the rest of the block intact without replacing any tags.
<!-- build:js scripts/combined.js -->
<script type="text/javascript" src="scripts/this.js"></script>
<script type="text/javascript" src="scripts/that.js"></script>
<!-- endbuild -->
Results in:
<script type="text/javascript" src="scripts/this.js"></script>
<script type="text/javascript" src="scripts/that.js"></script>
Type: Function
Return: The path to the source file
Function to parse the source path out of a script or style element.
The function gets the following arguments:
js, cssType: Function
Return: The transformed path to the target file
Function to transform the target file path.
The function gets the following arguments:
js, cssSee the CONTRIBUTING Guidelines
MIT © Jonathan Kemp
FAQs
Parse build blocks in HTML files to replace references
We found that pxl-useref 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
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
Research
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
Security News
TeamPCP is partnering with ransomware group Vect to turn open source supply chain attacks on tools like Trivy and LiteLLM into large-scale ransomware operations.