gulp-useref-import
v1.0.7
Published
Gulp plugin for useref with html5 import support
Downloads
8
Maintainers
Readme
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-import
Usage
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
,import
orremove
;remove
will 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>