Ako integrovať Visual Studio 2013 s Grunt-om - časť 1

DOWNLOAD

Príprava projektu

Na nové Visual Studio 2015 som sa veľmi tešil, a jeden z hlavných dôvodov prečo bol aj fakt, že v 2015-ke je už integrovaný Grunt (respektíve Gulp) task runner. Ono to funguje, ale mohlo by to byť aj lepšie ;).

Je tam intellisense pri editovaní package.json, čo je super. Je tam Task Runner Explorer, ktorý áno, môžem si stiahnuť aj do 2013-ky, ale nenašiel som spôsob, ako napríklad nabindovať niektoré tasky tak, aby bežali napríklad pri publishe web aplikácie. Ani ako pri builde pustiť rôzne tasky v závislosti od konfigurácie. Tak isto by som čakal (neviem či je to len môj pohľad na vec), že ak mám nejaký task nabindovaný napríklad na Before Build akciu, a tento task skončí s chybou, tak by mal aj samotný build skončiť s chybou, je to predsa súčasť build procesu. Žiaľ, nie je tomu tak, navyše výstup z týchto taskov nie je smerovaný do Output okna, ale do okna Task Runner-a, kde musím pracne čítať tento výstup, aby som sa dozvedel kde sa stala chyba, ak sa teda stala.

Nechcem sa ale príliš venovať tomu ako to ne/funguje v 2015-ke. Chcel by som sa radšej venovať tomu, ako napríklad Grunt integrovať s Visual Studio 2013 a MVC projektom.

Ako základ použijem ASP.NET Web Application/Empty project template. Mohol by som vychádzať priamo aj z MVC templatu, ale ten obsahuje kopec vecí ktoré nebudem v tomto prípade potrebovať, a radšej to minimum pridám do prázdneho templatu. Ak by niekto chcel použiť ako základ iný template, môže s kľudným svedomím prejsť k tej zaujímavejšej časti.

Vo Visual Studiu teda vytvoríme nový projekt výberom z menu
  • File
  • New Project...
  • ASP.NET Web Application
  • Empty
, zadáme názov projektu (ja som si zvolil názov GruntMvcDemo) a potvrdíme výber stlačením tlačidla OK.

V tejto chvíli, náš projekt nerobí nič, preto ako prvé pridáme do neho "MVC veci". Do projektu pridáme adresáre: Controllers, Models, Views. V okne Solution Explorer klikneme pravým tlačidlom myšky na náš projekt, a zvolíme možnosť Manage NuGet Packages.... Vyhľadáme a do projektu nainštalujeme balíček Microsoft.AspNet.Mvc. Do projektu by sa mal pridať nový súbor packages.config a okrem spomínaného balíčka by sa mali nainštalovať aj balíčky: Microsoft.AspNet.Razor, Microsoft.AspNet.WebPages, Microsoft.Web.Infrastructure.

Teraz si musíme pripraviť základnú triedu pre našu aplikáciu. To urobíme tak, že v okne Solution Explorer klikneme pravým tlačidlom myšky na náš projekt, a zvolíme
  • Add
  • New Item...
  • Global Application Class
s názvom Global.asax a potvrdíme stlačením tlačidla Add. Do vygenerovaného súboru doplníme metódu Application_Start, v rámci ktorej nadefinujeme defaultné URL routes:

protected void Application_Start(object sender, EventArgs e)
{
    RouteTable.Routes.IgnoreRoute(
"{resource}.axd/{*pathInfo}");

    
RouteTable.Routes.MapRoute(
        name: 
"Default",
        url: 
"{controller}/{action}/{id}",
        defaults: 
new
        
{
            controller 
"Home",
            action 
"Index",
            id 
UrlParameter.Optional
        }
    )
;
}
Zadefinovanie URL routes pre aplikáciu

Ako ďalší krok, do súboru web.config doplníme sekciu appSettings, s potrebnými nastaveniami:

<appSettings>
    
<add key="webpages:Version" value="3.0.0.0" />
    <
add key="webpages:Enabled" value="false" />
</
appSettings>
Nastavenia appSettings v súbore web.config

Pri konfigurovaní ešte chvíľu ostaneme. Do adresára Views, musíme pridať tiež jeden konfiguračný súbor, a to kliknutím pravým tlačidlom myšky v okne Solution Explorer a zvolením možnosti
  • Add
  • Web Configuration File
a potvrdením stlačením tlačidla OK. Obsah súboru nahradíme nasledovným obsahom:

<?xml version="1.0"?>
<configuration>
  
<configSections>
    
<sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
      
<section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
      <
section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
    </
sectionGroup>
  
</configSections>
  
<system.web.webPages.razor>
    
<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <
pages pageBaseType="System.Web.Mvc.WebViewPage">
      
<namespaces>
        
<add namespace="System.Web.Mvc" />
        <
add namespace="System.Web.Mvc.Ajax" />
        <
add namespace="System.Web.Mvc.Html" />
        <
add namespace="System.Web.Routing" />
      </
namespaces>
    
</pages>
  
</system.web.webPages.razor>
  
<appSettings>
    
<add key="webpages:Enabled" value="false" />
  </
appSettings>
  
<system.webServer>
    
<handlers>
      
<remove name="BlockViewHandler"/>
      <
add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />
    </
handlers>
  
</system.webServer>
</configuration>
Obsah súboru Views\web.config

Keďže sme v MVC svete, do adresára Controllers si pridáme HomeController s jednou akciou Index:

using System.Web.Mvc;

namespace 
GruntMvcDemo.Controllers
{
    
public class HomeController : Controller
    {
        
public ActionResult Index()
        {
            
return View();
        
}
    }
}
Obsah súboru HomeController.cs

Ak by sme teraz spustili aplikáciu, zobrazila by sa nám chybová hláška The view 'Index' or its master was not found or no view engine supports the searched locations.. Preto musíme pridať view pre našu akciu. V adresári Views vytvoríme podadresár Home, do ktorého umiestnime nový view a to tak, že v okne Solution Explorer klikneme pravým tlačidlom myšky na adresár Home a v menu zvolíme možnosť
  • Add
  • New Item...
  • MVC5 View Page (Razor)
, ako názov súboru zadáme Index.cshtml a potvrdíme stlačením tlačidla Add. Vygenerovaný obsah súboru nahradíme nasledovným obsahom:

<!DOCTYPE html>
<html lang="en">
<head>
    
<meta charset="utf-8" />
    <
title>GruntMvcDemo</title>
</head>
<body>
    
<h1>GruntMvcDemo</h1>
</body>
</html>
Obsah súboru Index.cshtml

V tomto kroku už máme pripravený MVC projekt na to, aby sme do build procesu zaintegrovali Grunt task runner. Ako teda prebehne integrácia? Samotný grunt task je možné spustiť z príkazového riadku. Takto to v podstate budeme aj realizovať. Samotná realizácia spočíva v tom, že si do externého súboru GruntMvc.targets zadefinujeme MSBuild target-y a napojíme ich do build procesu projektu. Tam kde máme na disku uloženú našu solution (tam kde je súbor s príponou *.sln), vytvoríme nový súbur GruntMvc.targets s nasledovným obsahom:

<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  
<PropertyGroup>
    
<BuildDependsOn>
      HelloWorldTarget;
      $(BuildDependsOn);
    
</BuildDependsOn>
  
</PropertyGroup>

  
<Target Name="HelloWorldTarget">
    
<Message Text="Hello world." Importance="high" />
  </
Target>
</Project>
Obsah súboru GruntMvc.targets

Už z obsahu súboru je jasné že ide o xml súbor. Vyššie uvedený obsah definuje jeden target HelloWorldTarget, ktorý do output okna zapíše text Hello world. Pri builde projektu MSBuild volá target s názvom Build. To čo sa robí v tomto target-e sa môže líšiť v závislosti od typu projektu. My nebudeme prepisovať samotný Build target, ale využíjeme základnú vlastnosť každého target-u DependsOnTargets, ktorá umožňuje vymenovať názvy target-ov, ktoré sa majú zavolať pred volaním samotného target-u. Pre Build target sú tieto závislosti vymenované v PropertyGroup BuildDependsOn. My budeme teda postupne dopĺňať/prepisovať túto PropertyGroup tak, aby sa naše targety volali spolu s ostatnými target-mi, na ktorých má Build target závislosť.

To, že sme na disku vytorili vyššie uvedený súbor, ešte nespôsobí že bude MSBuild o ňom automaticky vedieť. Musíme naň pridať závislosť priamo do projektového súboru (súbor GruntMvcDemo.csproj). V okne Solution Explorer klikneme pravým tlačidlom na solution a z menu vyberieme možnosť
  • Add
  • New Solution Folder
a ako názov zadáme .targets. Následne klikneme pravým tlačidlom myšky na tento adresár, a zvolíme možnosť
  • Add
  • Existing Item...
a vyberieme náš súbor GruntMvc.targets. Vďaka tomuto budeme môcť editovať tento súbor priamo vo Visual Studiu. Referenciu do projektu pridáme tak, že v okne Solution Explorer klikneme pravým tlačidlom myšky na náš projekt, a zvolíme možnosť
  • Unload project
. Projekt sa unloadne zo solution. Opätovným pravým kliknutím vyvoláme kontextové menu a zvolíme možnosť
  • Edit GruntMvcDemo.csproj
. Na predposledný riadok súboru (tesne pred uzatvárací tag </Project>) vložíme nasledovné volanie:

<Import Project="$(SolutionDir)\GruntMvc.targets" Condition="Exists('$(SolutionDir)\GruntMvc.targets')" />
Import súboru GruntMvc.targets do proj súboru

Opätovne klikneme pravým tlačidlom myšky na náš projekt a zvolíme možnosť
  • Reload project
. Keď teraz spustíme build projektu, do output okna sa zapíše "Hello world.". Týmto krokom môžeme uzavrieť prípravnú fázu projektu. Pevne verím, že možno trochu zdĺhavejší úvod nikoho neodradil. V ďalšej časti sa budem venovať už vytvárania samotných MSBuild target-ov, ktoré budú predstavovať spomínanú integráciu Grunt task runnera do build procesu projektu.
Publikované Wednesday, May 04, 2016 2:28 PM xxxmatko

Komentáre

Bez komentárov