How to make version control for JS file, CSS, HTML and etc

Question

I would like to know how to control the versioning of my Js, CSS and HTML files, because when I upload a new version to the server, the website is cached.

I saw that there is the grunt-usemin, but I couldn’t find any explanation for how to use it.

I’d like to leave the files like this:

meuscript.js?v=0123456

Answer 1

Asp.net-mvc

In Asp.net-mvc you can try the solution of Soen’s reply

public static class JavascriptExtension
{
    public static MvcHtmlString IncludeVersionedJs(this HtmlHelper helper, string filename)
    {
        string version = GetVersion(helper, filename);
        return MvcHtmlString.Create("<script type='text/javascript' src='" + filename + version + "'></script>");
    }

    private static string GetVersion(this HtmlHelper helper, string filename)
    {
        var context = helper.ViewContext.RequestContext.HttpContext;

        if (context.Cache[filename] == null)
        {
            var physicalPath = context.Server.MapPath(filename);
            var version = $"?v={new System.IO.FileInfo(physicalPath).LastWriteTime.ToString("MMddHHmmss")}";
            context.Cache.Add(filename, version, null,
              DateTime.Now.AddMinutes(5), TimeSpan.Zero,
              CacheItemPriority.Normal, null);
            return version;
        }
        else
        {
            return context.Cache[filename] as string;
        }
    }
}

And in View call it that:

@Html.IncludeVersionedJs("/meuscriptminificado.js")

That will result in this:

<script type='text/javascript' src='/meuscriptminificado.js?20111129120000'></script>

---

ASP.NET Core MVC

In Asp.net core (Asp.net-mvc 6) there is the asp-append-version and you can use it like this:

<script src="scripts/meujs.js" asp-append-version="true"></script>
<link href="styles/meucss.css" rel="stylesheet" asp-append-version="true" />

---

PHP

With PHP you can use filemtime, something that would be like:

<link rel="stylesheet" href="styles/meucss.css?v=<?php echo filemtime('caminho/real/styles/meucss.css'); ?>">

<script src="scripts/meujs.js?v=<?php echo filemtime('caminho/real/scripts/meujs.js'); ?>"></script>

However create a function that can facilitate a lot and in case just call IncludeVersioned, thus:

<?php
function IncludeVersioned($file) {
     $absoluto = 'ect/var/www/caminho/dos/resources/'; # ajuste aqui
     if (is_file($absoluto . $file)) {
          $time = $absoluto . $file;

          $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));

          switch ($ext) {
               case 'js':
                   echo '<script src="', $file,'?v=', $time,'"></script>';
               break;
               case 'css':
                   echo '<link href="', $file,'?v=', $time,'" rel="stylesheet">;
               break;
               default:
                   echo '<!-- tipo invalido de resource -->';
          }
     } else {
           echo '<!-- resource não encontrado -->';
     }
}
?>

<?php IncludeVersioned('scripts/foo.js'); ?>
<?php IncludeVersioned('styles/foo.css'); ?>