Just use gulp-useref instead. gulp-useref now handles concatenation of files from build blocks, so gulp-bundle is no longer needed.
gulp-bundle
Parse build blocks in HTML to concatenate JavaScript and CSS files. A minify option is available.
This is not a gulp plugin. It is meant to be used together with gulp-useref to parse the build blocks in the HTML files, bundle those assets and export the files. This makes it easier to bundle components separately, for example Bower files.
Install with npm
npm install --save-dev gulp-bundle
var gulp = require('gulp'),
bundle = require('gulp-bundle');
gulp.task('bundle', bundle('./app/*.html'));
With options:
var gulp = require('gulp'),
bundle = require('gulp-bundle');
gulp.task('bundle', bundle('./app/*.html', {
appDir: 'app',
buildDir: 'dist',
minify: true
}));
With gulp-useref:
var gulp = require('gulp'),
useref = require('gulp-useref'),
bundle = require('gulp-bundle');
gulp.task('bundle', bundle('./app/*.html', {
appDir: 'app',
buildDir: 'build',
minify: true
}));
gulp.task('html', function(){
return gulp.src('./app/*.html')
.pipe(useref())
.pipe(gulp.dest('build/'));
});
gulp.task('build', ['bundle', 'html']);
The build block syntax is build:type path/filename
. Valid types are js
and css
.
<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 -->
</body>
</html>
Pattern should be the path to your HTML files.
Type: String
Pattern to be matched.
Type: Object
Options to pass to node-glob.
Type: String
Default: app
Where to find the files.
Type: String
Default: dist
Where to put the files.
Type: Boolean
Default: true
Minifies CSS and JavaScript files.
Type: Object
Default: {}
Options to pass to gulp-minify-css. Check the documentation to see the options.
Type: Object
Default: {}
Options to pass to gulp-uglify. Check the documentation to see the options.
MIT © Jonathan Kemp