Combinando e diminuindo JS e CSS no ASP.NET MVC

Question

Oct 06, 2012, 07:53 AM

Combinando e diminuindo JS e CSS no ASP.NET MVC

Eu criei o aplicativo da Web ASP.NET MVC 3 padrão. Em seguida, adicionei três arquivos css e três js à visualização \ Views \ Shared_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/StyleSheet1.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/StyleSheet2.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/JScript1.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/JScript2.js")" type="text/javascript"></script>

</head>
<body>
    <div class="page">
        <div id="header">

....

quando executo o aplicativo, o código html é

<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="/Content/StyleSheet1.css" rel="stylesheet" type="text/css" />
    <link href="/Content/StyleSheet2.css" rel="stylesheet" type="text/css" />

    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/JScript1.js" type="text/javascript"></script>
    <script src="/Scripts/JScript2.js" type="text/javascript"></script>

</head>
<body>
    <div class="page">

É possível ter um manipulador no MVC para alterar o meu html de saída para gostar:

<!DOCTYPE html>
    <html>
    <head>
        <title>Home Page</title>
        <script src="js.axd=/Scripts/jquery-1.5.1.min.js,/Scripts/JScript1.js,/Scripts/JScript2.js" type="text/javascript"></script>
        <link href="css.axd=/Content/Site.css,/Content/StyleSheet1.css,/Content/StyleSheet2.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="page">

Então o linkjs.axd=/Scripts/jquery-1.5.1.min.js,/Scripts/JScript1.js,/Scripts/JScript2.js irá retornar o conteúdo de todos esses arquivos js para o navegador, e linkcss.axd=/Content/Site.css,/Content/StyleSheet1.css,/Content/StyleSheet2.css irá retornar o conteúdo de todos os arquivos css.

Eu fiz algo antes no asp.net por IHttpHandler, mas não consigo descobrir como fazer isso no MVC, desde que eu sou apenas iniciante no MVC.

Qualquer ajuda e exemplos de código irão apreciar. Obrigado!