laravel-elixir-bower

Elixir Wrapper Around Bower

Usage

var elixir = require('laravel-elixir');

require('laravel-elixir-bower');

elixir(function(mix) {
    mix.bower();
});

This will :

scan your bower files
concat all css files in a public/css/vendor.css file
concat all js files in a public/js/vendor.js file
copy all webfonts in a fonts/ folder.
copy all images in a imgs/ folder.

Settings

The default settings are the following :

{
    debugging: false,               // Enable/Disable verbose output
    flatten: true,                  // Enable/Disable flat asset structure 
    css: {
        file: 'vendor.css',         // Merged CSS file
        output: config.cssOutput    // Elixir default css output folder (public/css)
    },
    js: {
        file: 'vendor.js',          // Merged JS file
        output: config.jsOutput     // Elixir default js output folder (public/js)
    },
    font: {
        output: 'public/fonts'      // Web fonts output folder
    },
    img: {
        output: 'public/imgs',   
        extInline: ['gif','png'],   // Extensions to inline
        maxInlineSize: 32 * 1024    // [kB] Inline as data uri images below specified size
                                    // (use 0 to disable, max 32k on ie8)
    }
}

Each setting can be overwritten by passing them as an object to the bower() function.

Any setting can also be set to false to prevent generation and output of those files.

Examples

elixir(function(mix) {
    mix.bower({
        debugging: true,
        css: {
            file: 'plugins.css'
        },
        js: {
            output: 'public/scripts'
        }
    });
});

var options = {};
options.debugging = true;
options.css = {file: 'plugins.css'};
options.js = {output: 'public/scripts'};

elixir(function(mix) {
    mix.bower(options);
});

Those examples do the same :

scan your bower files
concat all css files in a public/css/plugins.css file
concat all js files in a public/scripts/vendor.js file
copy all webfonts in a fonts/ folder.

elixir(function(mix) {
    mix.bower({
        debugging: true,
        css: false,
        js: false,
        font: {
            output: 'public/fonts'
        },
        img: {
            output: 'public/css',
            extInline: ['gif', 'png'],   // Extensions to inline
            maxInlineSize: 32 * 1024    // [kB] Inline as data uri images below specified size
                                        // (use 0 to disable, max 32k on ie8)
        }
    });
});

This example does the following:

scan your bower files
skips css and js files
copy all webfonts in a public/fonts/ folder.
copy all gif or png images into public/css folder.
inline any of those images which are smaller than 32k.

elixir(function(mix) {
    mix.bower({
        debugging: true,
        flatten: false,
        css: {
            output: 'public/css'
        },
        js: false,
        font: {
            output: 'public/fonts'
        },
        img: {
            output: 'public/imgs',
            extInline: ['gif', 'png'],   // Extensions to inline
            maxInlineSize: 32 * 1024    // [kB] Inline as data uri images below specified size
                                        // (use 0 to disable, max 32k on ie8)
        }
    });
});

This example does the following:

scan your bower files
deactivate flat asset mode
concat all css files in a public/css/plugins.css file
skips js files
copy all webfonts in a public/fonts/{bower_package}/xxx folder (according to bower package structure)
copy all gif or png images into public/imgs/{bower_package}/xxx folder (according to bower package structure)
inline any of those images which are smaller than 32k.

loranger/laravel-elixir-bower

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages