mediactive-digital/laravel-asset-aliases

Link CSS / JS files in Laravel Blade templates

Link CSS / JS files in Laravel Blade templates

This package makes it easier to link CSS / JS files in Laravel Blade templates., _(*1)

Installation

Require the package using Composer.

composer require mediactive-digital/laravel-asset-aliases

Laravel < 5.5

Add the service provider to /config/app.php file., _(*2)

'providers' => [
    // ...
    MediactiveDigital\LaravelAssetAliases\LaravelAssetAliasesServiceProvider::class,
],

Add the AssetManager facade to /config/app.php file., _(*3)

'aliases' => [
    // ...
    'MDAsset' => MediactiveDigital\LaravelAssetAliases\LaravelAssetAliasesFacade::class,
],

Htaccess changes

In order to avoid cache issues, especially with nginx, this package add specific timestamp in the filename of js & css files. home.js will be called as home.{timestamp}.js. You will need to add the following rule to your .htaccess file., _(*4)

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule ^(.*)\.[0-9]+\.(css|js)$ /$1.$2 [L]
</IfModule>

Usage

You can link either an internal resource or an external URL., _(*5)

Link CSS files.

simple file, _(*6)

    {!! MDAsset::addCss('stylesheet.css') !!}

or array of files, _(*7)

    {!! MDAsset::addCss(['stylesheet.css', 'stylesheet2.css']) !!}

Link JS files.

simple file, _(*8)

    {!! MDAsset::addJs('script.js') !!}

or array of files, _(*9)

    {!! MDAsset::addJs(['script.js', 'script2.js']) !!}

Link CSS / JS files by aliases.

Add aliases to the configutation file located at /config/laravel-asset-aliases/alias.php., _(*10)

// Example
return [
    'css' => [
        'stylesheet' => 'stylesheet.css'
    ],
    'js' => [
        'script' => 'script.js'
    ]
];

Then link files by aliases, for example :, _(*11)

    {!! MDAsset::addCss('stylesheet') !!}

Support for HTML attributes.

You can pass any number of HTML attributes along with your file definition.\ It can be done both in configuration file and / or Blade templates.\ Attributes defined in Blade templates override configuration ones., _(*12)

If you do so, you must use an associative array with the mandatory keys "file" and "attributes".\ "file" being your file (string) and "attributes" being your HTML attribute(s) (array)., _(*13)

// Examples

// Inside configuration file : 
return [
    'css' => [
        'stylesheet' => [
            'file' => 'stylesheet.css',
            'attributes' => [
                'media' => 'print',
                'title' => 'title'
            ]
        ],
        'other-stylesheet' => [
            'file' => 'other-stylesheet.css',
            'attributes' => [
                'media' => 'screen'
            ]
        ]
    ],
    'js' => [
        'script' => [
            'file' => 'script.js',
            'attributes' => [
                'integrity' => 'sha384-rAnDoMkeY',
                'crossorigin' => 'anonymous'
            ]
        ],
        'other-script' => [
            'file' => 'other-script.js',
            'attributes' => [
                'async' => null
            ]
        ]
    ]
];

// Inside Blade template : 
{!! MDAsset::addCss([
    [
        'file' => 'stylesheet', 
        'attributes' => [
            'media' => 'print',
            'title' => 'title'
        ]
    ], 
    [
        'file' => 'other-stylesheet', 
        'attributes' => [
            'media' => 'screen'
        ]
    ]
]) !!}

{!! MDAsset::addJs([
    [
        'file' => 'script.js', 
        'attributes' => [
            'integrity' => 'sha384-rAnDoMkeY', 
            'crossorigin' => 'anonymous'
        ]
    ], 
    'other-script' => [
        'file' => 'other-script.js',
        'attributes' => [
            'async' => null
        ]
    ]
]) !!}