GithubHelp home page GithubHelp logo

craft-asset-rev's Introduction

CraftCMS Asset Rev (Cache Busting)

A Twig extension for CraftCMS that allows you to swap out asset file names with their revved version, as defined in a JSON manifest file.

Manifest files would most likely be generated by Grunt/Gulp modules, such as grunt-filerev-assets or gulp-rev.

Why?

In order to speed up the load time of your pages, you can set a far-future expires header on your images, stylesheets and javascript. However, when you update those assets you'll need to update their file names to force the browser to download the updated version.

You could append a query string to the asset url (e.g. css/main.css?v=24), but you should read here to find out why that's not an ideal solution.

Installation

Copy the assetrev folder to your craft/plugins directory and activate it from the Craft plugin settings page. Once activated, you may want to specify a custom path to your asset manifest file within the plugin configuration.

##Configuration The plugin comes with a config.php file that defines some sensible defaults.

If you want to set your own values you should create a assetrev.php file in your Craft config directory. The contents of this file will get merged with the plugin defaults, so you only need to specify values for the settings you want to override.

###Manifest Path manifestPath is relative to the base path of your Craft installation (whatever CRAFT_BASE_PATH is set to).

###Assets Base Path assetsBasePath will be prepended to the output of rev(). You can use any environment variables that you may have set in your general.php config file here.

###Example assetrev.php Config File

<?php
return array(
	'*' => array(
		'manifestPath' => 'resources/assets/assets.json',
		'assetsBasePath' => '{baseUrl}',
	),
);

Usage

Once activated and configured you can use the rev() function in your templates.

<link rel="stylesheet" href="{{ rev('css/main.css') }}">

css/main.css will be replaced with the corresponding hashed filename as defined within your assets manifest .json file.

If the contents of your manifest file are...

{
    "css/main.css": "css/main.a9961d38.css",
    "js/main.js": "js/main.786087f7.js"
}

then rev('css/main.css') will expand to css/main.a9961d38.css.

Note: If the plugin can't find your manifest file, it will just return the filename passed into rev(). This is helpful during development as you aren't required to keep rebuilding the manifest file each time you update an asset.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.