1.0.7 • Published 8 years ago
gulp-useref-import v1.0.7
Currently requires branched versions of gulp-useref && useref awaiting pull-requests on the forks, and are defined in package.json
Install
Install with npm
npm install --save-dev gulp-useref-importUsage
The following example will parse the build blocks in the HTML, replace them and pass those files through. Assets inside the build blocks will be concatenated and passed through in a stream as well.
const gulp = require('gulp'),
useref = require('gulp-useref-import')
gulp.task(min)
function min () {
return gulp.src('app/*.html')
.pipe(useref())
.pipe(gulp.dest('dist'))
}Blocks are expressed as:
<!-- build:<type>(alternate search path) <path> <parameters> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->- type: either
js,css,importorremove;removewill remove the build block entirely without generating a file - alternate search path: (optional) By default the input files are relative to the treated file. Alternate search path allows one to change that
- path: the file path of the optimized file, the target output
- parameters: extra parameters that should be added to the tag
An example of this in completed form can be seen below, where the partials contain either a list of css links or js scripts:
<html>
<head>
<!-- build:import dist/main.css -->
<link rel="import" href="partial/main.styles.html"></link>
<link rel="stylesheet" href="css/theme.css">
<!-- endbuild -->
</head>
<body>
<!-- build:import dist/main.js -->
<link rel="import" href="partial/main.scripts.html"></link>
<script src="js/star.js"></script>
<!-- endbuild -->
<!-- build:js dist/anotherone.js -->
<script src="js/khaled.js"></script>
<!-- endbuild -->
</body>
</html>The resulting HTML would be:
<html>
<head>
<link rel="stylesheet" href="dist/main.css"/>
</head>
<body>
<script src="dist/main.js"></script>
<script src="dist/anothaone.js"></script>
</body>
</html>