a gulp plugin that can replace references to non-optimized scripts or stylesheets in HTML files.
gulp-useref is a gulp plugin that can replace references to non-optimized scripts or stylesheets in HTML files. In order to indicate which of the scripts or stylesheets must be optimized a special build block commentary syntax is used:
<!-- build:<type>(alternate search path) <path> -->
List of script or link tags goes here
<!-- endbuild -->
The build block includes the following parameters:
- type: either
js,cssorremove(removedeletes the build block entirely without generating an output file) - path: the file path of the optimized file, the target output
- alternate search path (optional): by default the input files are relative to the treated file, this option allows to change that
The example of HTML file using build blocks:
<html>
<head>
<!-- build:css css/combined.css -->
<link href="css/one.css" rel="stylesheet">
<link href="css/two.css" rel="stylesheet">
<link href="css/three.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>
<script type="text/javascript" src="scripts/three.js"></script>
<!-- endbuild -->
</body>
</html>
The resulting HTML file after plugin usage would look like that
<html>
<head>
<link rel="stylesheet" href="css/combined.css"/>
</head>
<body>
<script src="scripts/combined.js"></script>
</body>
</html>
Example of plugin usage:
var gulp = require('gulp');
var useref = require('gulp-useref');
gulp.task('default', function () {
var assets = useref.assets();
return gulp.src('my-app/*.html')
.pipe(assets)
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest('dist'));
});
useref.assets call in the example above returns a stream with the concatenated asset files mentioned in the build blocks of the HTML files. restore brings back the contents of previously filtered out HTML files.
