node package manager
Love JavaScript? Your insights can make it even better. Take the 2017 JavaScript Ecosystem Survey »


Deprecation Notice

Just use gulp-useref instead. gulp-useref now handles concatenation of files from build blocks, so gulp-bundle is no longer needed.

gulp-bundle Build Status

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')
gulp.task('build', ['bundle', 'html']);

The build block syntax is build:type path/filename. Valid types are js and css.

    <!-- build:css css/combined.css -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.css" rel="stylesheet">
    <!-- endbuild -->
    <!-- build:js scripts/combined.js -->
    <script type="text/javascript" src="scripts/one.js"></script>
    <script type="text/javascript" src="scripts/two.js"></script>
    <!-- endbuild -->


bundle(pattern[, options])

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