html-build-blocks

    0.0.6 • Public • Published

    html-build-blocks Build Status

    Parse build blocks in HTML to return a mapping from destination file to array of input files. Intended for use in combination with gulp-replace-build-block, gulp-filter and gulp-concat to provide useref like behaviour in gulp.

    Inspired by the gulp-useref plugin, but with a signifigantly different design to provide greater modularity and streaming support.

    Install

    npm install --save-dev html-build-blocks
    

    Usage

    The following example will parse HTML build blocks and use the returned map to create a gulp pipeline for concatination of those blocks. Note, this example doesn't order the files, they are concatenated in the order gulp loads them. To ensure ordering them simply add gulp-order to the pipeline.

    var gulp = require('gulp'),
        concat = require('gulp-concat'),
        filter = require('gulp-filter'),
        buildblocks = require('html-build-blocks');
     
    gulp.task('default', function () {
        var blocks = buildblocks.parseBlocks('html/**/*.html'),
            p = gulp.src(['/css/**/*.css', '/js/**/*.js']),
            add_block_pipe = function(path, asset_paths) {
                var f = filter(asset_paths),
                    r = f.restore();
                p = p.pipe(f).pipe(concat(path)).pipe(r)
            };
     
        Object.keys(blocks).forEach(function() {
            add_block_pipe(path, blocks[path])
        });
     
        return p.pipe(gulp.dest('dist'));
    });

    Blocks are expressed as:

    <!-- build:<type> <path> -->
    ~ script tags or link tags ~
    <!-- endbuild -->
    • type: either js or css
    • path: the file path of the optimized file, the target output

    API

    buildblocks.parseBlocks(glob)

    Takes a glob or array of globs. Returns a mapping of destination paths to arrays of source files.

    eg.

        buildblocks.parseBlocks(['html/**/*.html','error/404.html']) ==
        {
         'css/index.css': ['/css/this.css', '/libs/that.css', ...],
         'js/index.js': ['/js/one_thing.js', '/libs/another_thing.js', ...],
         'js/404.js': ['/js/warning.js', ...],
         ...
        }

    License

    MIT © Nils Lundquist

    Install

    npm i html-build-blocks

    DownloadsWeekly Downloads

    0

    Version

    0.0.6

    License

    MIT

    Last publish

    Collaborators

    • nlundquist