Custom Builds

By default canvas gauges delivered with a good level of optimization. Up to your choice you can refer to a minified package which will include only that part you need.

By the way there are possible some tricks to make gauge packages more efficient in terms of disk space usage, or you may need to create your own extended build for some other reasons.

Optimizing Disk Space Usage

This can be critical when the gauges used, for example, with IoT devices, which has limited disk space. Here is a trick how to save up to 3-4 times of overall bytes of canvas gauges.

1. Get the required minified code only.
2. Gzip it
3. Tune web-server do deliver compressed code always.

Possible problem here is that some old browsers may not understand compression. But at present day the impact of this problem is very-very low. Anyway, if you have to support very old browsers, keep it in-mind.

Another problem is that in this case gauges may be injected into page only via http request by referring from a script tag. This problem can be ommited if you bundling the entire JavaScript code with your own build process. In this case you may gzip entire bundle.

If you choose compressing gauge code outside your build process it can be easily done using canvas-gauges tools.

$ git clone [email protected]:Mikhus/canvas-gauges.git
$ npm install
$ ./node_modules/.bin/gulp gzip

All minified and compressed packages can be found after that under dist/ directory. Just grab what you need and remove everything else.

Creating Custom Builds

As far as canvas gauges is an open source you may legally fork and modify it’s code. Tools infrastructure around canvas gauges may help you develop, build test and create production packaging of your changes.

Build process is using gulp as task runner. So there is several tasks which may be helpful when you need to create your custom build:

Usage: gulp [task] [options]
Tasks:
    build           Transpiles, combines and minifies JavaScript code.
     --type         build type:
                    'radial' - Gauge object only, 
                    'linear' - LinearGauge object only, 
                    'all' - everything (default)

    build:prod      Builds production packages

    clean           Clean-ups files from previous build.

    gzip            Runs gzipping for minified file.
                    Depends: ["build:prod"]

    watch           Watch for source code changes and automatically 
                    re-build when wny of them detected.
                    Depends: ["build"]