Wondering what’s next for npm?Check out our public roadmap! »

    urify-emitter

    1.1.2 • Public • Published

    urify-emitter

    experimental

    Similar to webpack's file-loader, this builds on the urify transform but emits a file into an application-level output directory. This allows for modular front-end code which relies on images and icons, without increasing JS bundle size or sacrificing browser image caching optimizations.

    Example front-end code:

    var datauri = require('datauri')
    var uri = datauri(__dirname+'/icon.png')
     
    var img = new Image()
    img.onload = function() {
        console.log("Image loaded!")
    }
    img.src = uri

    Now, from your application, you can bundle the code using the urify-emitter plugin.

    browserify -p [ urify-emitter -o images ] index.js > bundle.js

    This will emit a bundle.js file, which inlines the URI like so:

    var uri = 'images/53cf2c1426533b467d606312b4e246ef.png'

    It will also copy the static asset icon.png with the above hashed URL to your specified output directory, in this case images.

    You can also specifiy a --limit (or -l) option, and if the file is under that size in bytes, it will be inlined as a regular data URI.

    bundle-wide

    The plugin only transforms source at the top-level (i.e. application). To transform all module code throughout a bundle, you will need browserify v.6.1.0+ and the --ignore-transform command to override all urify transforms:

    browserify -p urify-emitter --it urify index.js > bundle.js

    gulp, grunt, npm scripts

    For a practical implementation of this, see urify-example.

    Usage

    NPM

    • --output, -o the output directory, defaults to .
    • --limit, -l the limit in bytes, under which we will inline with a Data URI
    • --base, -b an optional base to use on the inlined URL, which is joined with the asset name. For example, your local output directory might be in app/output, but your site URLs you can specify --base output so they look like output/53cf2c14265..png

    License

    MIT, see LICENSE.md for details.

    Install

    npm i urify-emitter

    DownloadsWeekly Downloads

    15

    Version

    1.1.2

    License

    MIT

    Last publish

    Collaborators

    • avatar