Začlenění procesu sestavení JS do MSBuild v Visual Studio 2012 Express

Jsem pracoval s ASP a ASP.NET pro asi deset let, počínaje ASP klasické a ustálení na .NET 2.0 jako moje oblíbená. Moje novoroční usnesení letošního roku (2013) bylo inovovat své práce .NET .NET 4.0 pomocí Visual Studio 2012 Express a opravdu seznámit s MSBuild, aby mohli zřetězit a minify soubory JavaScript jako součást procesu normální sestavení .NET projektu , v aplikaci Visual Studio.

Moje první láska je použití Ant v NetBeans PHP nebo JSP platformu pro tento druh práce, ale moje hlavní webové stránky běží na platformě .NET a je čas na aktualizaci, tak jsem se rozhodl zatnout zuby a ponořit zpět do některé seriózní studium vzniku plně proces integrovaného sestavení pomocí nástroje MSBuild.

Tento tutoriál vám ukáže, jak upravit soubor projektu Visual Studio 2012 Express zahrnout vlastní samostatné sestavení souboru, který bude provádět už všeobecně známé procesu zřetězení a zmenšování soubor JavaScript modulů do jednoho souboru, které jsou připraveny k nasazení .

Požadavky na software

Chtěl jsem složitý projekt, který předvádí tento proces, protože považuji, že ďábel je v detailech. Jsem často věrně následoval přehnaně jednoduchý kurz nebo Úvod k cizí předmět, pak zjistili, že kurz nepřipraví mě na kdy chcete udělat něco i poněkud obtížné. Takže v tomto kurzu budeme pokusit vzít Knockout.js a jQuery UI. Budeme také používat soubor JSON s hierarchií dat definovat menu. Používáme šablonu Knockout.js s foreach vazby které prochází JSON data k emitování hierarchie prvků ul jako značky HTML pro menubar kompatibilní s jQuery UI.

Bohužel menu není dosud k dispozici (verze 1.9 nebo 1.10) balík s jQuery UI, takže budete muset stáhnout soubory nabídek z oboru Menubar jQuery UI. YUI kompresor také potřebu minifying zdrojových souborů JavaScript. Pro tento kurz budete potřebovat Visual Studio 2012 Express pro Web nainstalován. Budete také potřebovat stáhnout:

• Knockout.js.
• jQuery.
• jQuery UI.
• Menubar pobočka jQuery UI projektu.
• YUI kompresor. Používám verzi 2.4.7.

Pokud jste zvyklí nejsou JSON, je vhodné na webu JSON.

Proč nástroj MSBuild a nikoliv dominantních?

Pokud čtete můj poslední výuka pomocí Ant vybudovat knihovnu JavaScript, možná se divíte, proč tento kurz není o NAnt. No s mojí zbrusu nové instalace Visual Studio 2012 Express, rád bych zkusit přinést můj rozvoj pod jednou střechou. Moje absolutní oblíbené IDE pro vývoj sestavení C#, po mnoho let, byl SharpDevelop. Před několika lety přestěhovali z dominantních MSBuild pro SharpDevelop verzi tři. Je čas pro mě následovat.

Jsme již nepoužíváte NAnt v našem procesu sestavení, jsme přešli zcela na MSBuild / CruiseControl.NET. A to považujeme schopnost závisí na dominantní operační systém jako krok zpět: pomáhá snížit počet pohyblivých částí, různé konfigurace, nastavení různých uživatelů.

#D 3.0 - shození NAnt podpora: Proč?

Odůvodnění: Proč integrovat sestavení JavaScript do sestavení .NET?

Let, pro mou vývojové nástroje pracoval jsem s třemi různými prostředími IDE současně:

1. Prudký vývoj pro můj vývoj sestavení C#, ale také boty horned JavaScript a CSS zřetězit a minimalizaci procesu sestavení do tohoto prostředí se speciálně instalované kopie NAnt.
2. Visual Studio (2005 atd.) pro stránky předlohy, stránky obsahu.
3. Externí editor jako Aptana zpracovat JavaScript rozvoj.

Pomocí tří IDE jako to byl vyčerpávající (a překvapivě zdanění pro můj CPU a RAM), takže další novoroční předsevzetí, je dát vše dohromady do Visual Studio. Proto je třeba pochopit jak integrovat kód JavaScript proces sestavení do celkové sestavení projektu.

Jednou z hlavních atrakcí MSBuild pro mě (na platformě Windows) je, že jde jako součást .NET, samotné. To znamená, že jakýkoliv počítač s Windows, který je aktuální službou Windows Update bude mít MSBuild k dispozici.

Srovnání NAnt a MSBuild na StackOverflow.

Nastavení prostředí

Otevřete nový projekt v Visual Studio 2012 Express. Nazval jsem to NetTutsMSBuildJs a vytvořil jsem ji uvnitř složky NetTuts zde: C:\NetTuts\MSBuildJs.

Jak můžete vidět na obrázku, jsem vytvořil několik složek takto:

Všimněte si, že některé složky se zobrazí šedě. To proto, že jsem je vyloučit z projektu. Můžete zapnout toto nastavení v místní nabídce:

Je to snadné odstranit a vytvořit adresáře během procesu vytváření, ale neexistuje žádný způsob, jak zahrnout nebo vyloučit položky programově z projektu. Concat a min složky v ladění js jsou jednorázové, automaticky generovaných procesem sestavení z cokoliv, co jste vytvořili ve složce src, takže je vhodné je vyjmout z projektu. Všimněte si, že nelze vyloučit složku ladění z projektu, protože obsahuje .NET webové stránky formuláře, které mají soubory s kódem na pozadí. Pokud vyloučíte složku, stránky webových formulářů vyvolat chyby, říká, že třídy definované v souborech kódu nebyl nalezen.

Můžete přepínat, zda tyto vyloučené objekty mají být zobrazeny na ikonu Zobrazit všechny soubory v horní části Průzkumníka řešení a klepnutím na tlačítko. Vždy chci být schopen vidět.

Existuje jeden další klíčovou součástí konfigurace, kterou potřebujeme pro tento projekt. IIS a integrovanou službu IIS Express neobsahují typ mime JSON ve výchozím nastavení, a budeme používat soubory JSON rozsáhle dodávat obsah, takže musíme dodat, že v souboru Web.config. V rámci konfigurace prvku přidání elementu system.webServer takto:

1

    <system.webServer>

2

        <staticContent>

3

            <mimeMap fileExtension=".json" mimeType="application/json" />

4

        </staticContent>

5

    </system.webServer>

JavaScript projekt: Vytváření nabídek pomocí JSON, Knockout a jQuery UI

Těžištěm tohoto kurzu je jak vytvořit JavaScript projekt v rámci projektu .NET, ale my nemůžeme jít dál dokud máme něco budovat, takže teď vysvětlím trochu ambiciózní projekt, který mám na mysli.

Tady je UML diagram komponent zobrazující všechny kusy, že projekt bude potřebovat. Prosím Poznámka: Toto je komplexní součásti diagramu z jako vývojář pohledu zobrazující všechny druhy jednorázových artefakty, které jsou pouze důležité, například pro ladění. To není diagram komponent pouze klíčové artefakty, které jsou potřebné v cílovém systému.

Diagram komponent definuje složení komponentů a artefakty v systému.
IBM: Diagramy komponent

V UML 2.0, "složkou" se používá k popisu více abstraktní idea: autonomní, zapouzdřená jednotky; "artefakt" slouží k popisu, co ukazuji v tomto diagramu: soubory a knihovny. Je to ideální diagram Ukázat, jak se různé soubory na sobě navzájem závislé. Například všechny webové stránky formuláře závisí na vzorové stránce hlavní. Js.build soubor nebude fungovat, pokud není k dispozici kompresor jar soubor. Soubor projektu a soubor js.build jsou nechutně, vzájemně závislé. Je-li soubor js.build není k dispozici, projekt nebude načten; js.Build nelze spustit sám, úkoly definované tam se spouštějí události AfterBuild v celkovém sestavení projektu.

Pro tento kurz chci zobrazit vodorovný řádek nabídek pomocí menubar pobočka jQuery UI. K tomu mám JSON soubor s daty hierarchické menu a šablonu Knockout.js cyklickou prostřednictvím tyto údaje k vykreslení
Značky jazyka HTML potřebné pro jQuery menu. Přidala jsem renderMenu funkce zpětného volání, která je aktivována události afterRender v šabloně Knockout. renderMenu pak jednoduše zavolá menubar konečně vykreslit menu s krásné jQuery UI lesklé rysy.

Krok 1: Produkční verze soubory

CSS

Stáhněte celý balík z jQuery UI včetně téma podle vašeho výběru. Po rozbalení stahování, přejít na složku s názvem css kde najdete složku s názvem zvoleného motivu. V mém případě jsem zvolil hladkost. Otevřít tuto složku a měli vidět soubory, které potřebujete:

Zkopírujte složku celé téma (hladkost) a vložte jej do složky css v projektu. Vraťte se do aplikace Visual Studio, klepněte na ikonu aktualizovat v horní části Průzkumníka řešení a hladkost složky by se měla zobrazit ve složce šablon stylů css. Měli byste zahrnout složku do projektu.

JQuery UI a konkrétní téma musíte také malý soubor CSS speciálně pro menu. Po stažení nabídky projektu z github, přejít k souboru jquery.ui.menubar.css po této cestě: \jquery-ui-menubar\themes\base\jquery.ui.menubar.css. Kopírovat, do css složky projektu.

JavaScript

Stáhněte aktuální verze produkční vydání jQuery, jQuery UI a Knockout. I using 1.8.2 pro jQuery, 1.9.2 pro jQuery UI a 2.1.0 pro vyseknutí. Zkopírujte je do složky js ve vašem projektu.

Budete také potřebovat nejnovější, nekomprimované verze jquery.ui.menubar.js, stažené z větve Menubar jQuery UI projektu. Kopírovat, do složky ladění js\src v projektu.

Stránka hlavní předlohy

Jsme vytvořit několik verzí stejné stránky pomoci ladit a testovat naše JavaScript. Stránka předlohy může samozřejmě pomoci zabránit duplikaci kódu. Zavolejte tuto stránku předlohy Main.Master.

Ponechte název prvku prázdné (budeme definovat název pro každou stránku, která používá tuto předlohu) a odkaz na všechny styly, které potřebujeme pro jQuery UI a menu:

1

<title></title>

2

<link rel="stylesheet" type="text/css" href="/css/smoothness/jquery-ui-1.9.2.custom.css">

3

<link rel="stylesheet" type="text/css" href="/css/smoothness/jquery-ui-1.9.2.custom.min.css">

4

<link rel="stylesheet" type="text/css" href="/css/jquery.ui.menubar.css">

Přidat ContentPlaceHolder těsně před konce těla, kde každá stránka bude odkaz na příslušné soubory jazyka JavaScript

1

    <asp:ContentPlaceHolder ID="JsScripts" runat="server"/>

Krok 2: Definice JSON Data potřebná pro Menubar

Tady je JSON objekt definující hlavní nabídku, kterou můžeme použít pro webové stránky anglické instruktorů. Vytvoření JSON soubor s názvem data.json nabídek ve složce json a naplňte ji s následujícím JSON.

1

{

2

    "nodes":[{

3

        "text": "For Students", 

4

        "nodes": [

5

6

        {

7

            "text": "Listening Practice", 

8

            "url":"listening-practice.json"

9

        },

10

        {

11

            "text": "Grammar", 

12

            "url":"grammar.json",

13

            "nodes": [

14

15

            {

16

                "text": "Verb Forms", 

17

                "url":"verb-forms.json",

18

                "nodes": [

19

20

                {

21

                    "text": "Verb Tense and Aspect",

22

                    "url":"verb-tense-and-aspect.json"

23

                },

24

                {

25

                    "text": "Modal Auxiliary Verbs",

26

                    "url":"modal-auxiliary-verbs.json"

27

                }

28

                ]

29

            },

30

            {

31

                "text": "Verb Patterns",

32

                "url":"verb-patterns.json"

33

            },

34

            {

35

                "text": "Noun phrases",

36

                "url":"noun-phrases.json"

37

            },

38

            {

39

                "text": "Complex sentences",

40

                "url":"complex-sentences.json"

41

            }

42

            ]

43

        }

44

        ]

45

    },

46

    {

47

        "text": "For Teachers", 

48

        "nodes": [

49

        {

50

            "text": "Teaching Materials",

51

            "url":"teaching-materials.json"

52

        },

53

        {

54

            "text": "Tests and evaluation grids",

55

            "url":"tests-and-evaluation.json"

56

        },

57

        {

58

            "text": "Media",

59

            "url":"media.json"

60

        }

61

        ]

62

    }

63

    ]

64

}

Uzly nejvyšší úrovně mají žádné URL vlastnost definována, takže po klepnutí, bude pouze zobrazit položky dílčí nabídky. Dílčí nabídky obsahují uzly s URL vlastnost definována. Po klepnutí na jeden z těchto uzlů, systém načte JSON data ze souboru na této adrese URL.

Každý JSON soubor propojen, v menu, obsahuje část obsahu v jednoduché struktury, definování záhlaví a text:

1

{

2

    "header": "Grammar", 

3

    "text": "A series of exercises helping you to improve your grammar."

4

}

Krok 3: Vyřazovací šablona pro Menubar

Definujeme to v Main.Master. Neexistuje žádný zřejmý způsob, jak minifying nebo zlepšení na něm pro nasazení, tak jsem chtěl re-používat s každou verzí stránky, které odkazují na stránku předlohy.

Chtěl jsem mít jen jednu šablonu Knockout k vykreslení HTML kódu (sady prvků vnořených ul) menu, ale nikoliv překvapivě události afterRender spojené s foreach vazba požáry s každé smyčce, nikoliv na konci procesu celý vykreslování. Tak jsem potřeboval vytvořit observableArray s pouze jeden element ul, svázat, Menu šablony, která vykreslí prvek vnější ul a vnořit menubar šablony uvnitř. Potom lze zpracovat událost jediného foreach s mou funkci renderMenu, který volá konstruktor menubar jQuery a vykreslí řádek nabídek v celé své kráse. Mám hodně pomoci na to z tohoto vlákna: nested-templates-with-knockoutjs-and-mvc-3-0.

Tady je šablona menu:

1

        <script type="text/html" id="MenuTemplate">

2

            <ul class="ui-widget-header" id="menu" data-bind="template: { name: 'MenuNodeTemplate', foreach: $data.root.nodes}"></ul>

3

        </script>

A tady je šablona uzel pro každý uzel panelu nabídky:

1

        <script id="MenuNodeTemplate" type="text/html">

2

            <li data-bind="addData: $data.url">

3

                <a data-bind="attr: {href: ('#' + $data.url)}"><span data-bind="text: $data.text"></span></a>

4

                <!-- ko if: $data.nodes -->

5

                <ul data-bind="template: { name: 'MenuNodeTemplate', foreach: $data.nodes}"></ul>

6

                <!-- /ko -->

7

            </li>

8

        </script>

Pak potřebujete div prvek, který svážete s MenuTemplate:

1

            <div data-bind="template: {name: 'MenuTemplate' , foreach: masters, afterRender: renderMenu}"></div>

Všimněte si, že šablona uzel používá containerless řízení toku syntaxi, která je založena na značky komentáře. Existuje pár věcí se děje tady, takže dovolte mi vysvětlit

V plně poskytované jQuery menu chci připojit obslužné rutiny pro událost select. Obslužná rutina má podpis události uživatelského rozhraní. Když klepnete na položku menu, je předán obslužná rutina objektu události a jQuery objekt reprezentující položku. Chcete-li získat text z objektu ui, zavoláme metodu text (ui.item.text()). Ale jak se dostaneme vlastnost url z podkladové JSON? To je trochu složitější a já to vysvětlím později, když se podíváme na funkci select vyvolanou click událostí na každé podnabídky položky a vlastní vazby addData připojené k li prvek v šabloně Knockout.

Nakonec potřebujete jen div prvek, kde můžeme zobrazit obsah načíst z datových souborů JSON:

1

        <div id="show-result" class="ui-widget">

2

            <h1 data-bind="text: header" class="ui-widget-header ui-corner-all"></h1>

3

            <div data-bind="html: text" class="ui-widget-content ui-corner-all"></div>

4

        </div>

Krok 4: Vytvoření stránky webových formulářů, které závisí na souboru Main.Master

Výchozí src.aspx

Vytvoření webového formuláře pomocí stránky předlohy v ladění složku s názvem výchozí src.aspx.

Ukázalo se, to milosrdně krátký soubor. To je jedna z velkých výhod .NET přístupu do předlohy stránky. Existují pouze dvě ContentPlaceHolders v stránce předlohy. Přidejte následující odkazy na soubory JavaScriptu obsahu prvek spojen ContentPlaceHolder JsScripts:

1

<%@ Page Title="Default src" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="Default-src.aspx.cs" Inherits="NetTutsMsBuildJs.debug.Default_src" %>

2

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

3

</asp:Content>

4

<asp:Content ID="Content2" ContentPlaceHolderID="JsScripts" runat="server">

5

    <script src="/js/jquery-1.8.2.min.js"></script>

6

    <script src="/js/jquery-ui-1.9.2.custom.min.js"></script>

7

    <script src="/debug-js/src/jquery.ui.menubar.js"></script>

8

    <script src="/js/knockout-2.1.0.js"></script>

9

    <script src="/debug-js/src/default-src.js"></script>

10

</asp:Content>

Vytvořte nový soubor JavaScript s názvem výchozí src.js ve složce ladění js\src.

Jsme vše uzavřete do volání funkce $ obvyklé jQuery, která zajišťuje, že stránky je plně načten před spuštěním cokoliv.

1

        $(function () {

2

3

        });

Od jQuery 1.4 je-li soubor JSON obsahuje syntaktickou chybu, žádost obvykle selže. Viz: jQuery.getJSON().

Potřebujeme tři hlavní druhy funkce zde:

1. Volání metody getJSON jQuery načíst data JSON pro menu. Pokud se to podaří, vytvořit zobrazení modelu Knockout a zavolejte ko.applyBindings(viewModel) jej aktivovat.
2. Funkce renderMenu, která se nazývá události afterRender MenuTemplate. Tato funkce volá konstruktor menubar vykreslení menu.
3. Zvolte funkci, která je volána, když uživatel klepne na položku nabídky. Tato funkce načte JSON data z příslušného obsahu souboru a zobrazí jej na stránce.

Všimněte si, že výběr funkce musí být schopen načíst adresu URL z podkladových dat JSON. To je nejkomplikovanější část vzít jQuery menu funkce šablonou Knockout. jQuery umožňuje přidat data a načíst data z prvku HTML. Chcete-li přidat data z prostředí naší šablony Knockout, musíme použít vlastní vazby, který má přístup k prvku jazyka HTML, který je vázán na. Vazba, jsem vytvořil se nazývá addData a je jednoduše připojen k ko.bindingHandlers obvyklým způsobem Knockout s init metodu a metodu aktualizace.

1

    ko.bindingHandlers.addData = {

2

        init: function (element, valueAccessor) {

3

            var value = ko.utils.unwrapObservable(valueAccessor());

4

            if (value) {

5

                $.data(element, "url", value);

6

            }

7

        },

8

        update: function (element, valueAccessor) {

9

            var value = ko.utils.unwrapObservable(valueAccessor());

10

            if (value) {

11

                $.data(element, "url", value);

12

            }

13

        }

14

    };

Možná šablona uzel nyní dává větší smysl. JQuery objekt předaný jako ui v obslužné rutině select představuje nejvyšší li prvek každé položky menu, takže jsme přidat vlastní vazby prvku položky seznamu: data bind = "addData: $data.url". Nyní, když každý prvek má některá data k němu připojené, můžeme načíst z rutiny select s následující syntaxí: ui.item.data("url"), dat metodou jQuery.

Link prvek je více přímočarý a používá standardní vazby attr a textu:

1

        <a data-bind="attr: {href: ('#' + $data.url)}">

2

            <span data-bind="text: $data.text"></span>

3

        </a>

Jen Vezměte na vědomí, že jsem s předponou href se symbolem hash. Tímto způsobem, když kliknete na položku menu, nesleduji odkaz na jinou stránku. Místo toho vyberte událost je aktivována a rutinu, omlouvám se, zpracovává jej.

Zde je kompletní výběr funkce používající tento přístup k načtení dat z objektu jQuery představující prvek vykreslen Knockout:

1

    function select(event, ui) {

2

        var url = "/json/" + ui.item.data("url");

3

        $.getJSON(url, function (data) {

4

            viewModel.header(data.header);

5

            viewModel.text(data.text);

6

        })

7

        .error(function (errorData) {

8

            viewModel.header("Error");

9

            if (errorData.status === 404) {

10

                viewModel.text("Could not find " + ui.item.text() + " at " + url);

11

            } else {

12

                viewModel.text("There has been an error, probably a JSON syntax error. Check the JSON syntax in the file <code>" + url + "</code>");

13

                console.log(errorData);

14

            }

15

        });

16

    }

Přidala jsem navíc chyb soutisku protože jQuery, nyní mlčí o chybách syntaxe JSON. Nechci, aby se uživateli zatěžovat detaily chyby syntaxe JSON, ale chci dát nějaké ponětí o co by se pokazilo.

Tady je Knockout zobrazení modelu definované ve funkci připojené k getJSON() metody:

1

    $.getJSON('/json/menubar-data.json', function (data) {

2

        viewModel = {

3

            header: ko.observable(),

4

            text: ko.observable(),

5

            masters: ko.observableArray([

6

            {

7

                name: "Master1",

8

                root: data

9

            }

10

            ]),

11

            renderMenu: function () {

12

                $("#menu").menubar({

13

                    autoExpand: true,

14

                    menuIcon: true,

15

                    buttons: true,

16

                    select: select

17

                });

18

            }

19

        };

20

        ko.applyBindings(viewModel);

21

        viewModel.header("Welcome");

22

        viewModel.text("The English Resource Page");

23

24

    })

25

    .error(function (errorData) {

26

        console.log({ "errorData": errorData });

27

        console.log(errorData.error());

28

    });

Krok 5: Spusťte projektu v režimu ladění.

S výchozí src.aspx otevřít v okně IDE klepněte na tlačítko (zelená šipka těsně pod menu IDE) spusťte v režimu ladění.

Po procesu sestavení výchozí src.aspx by se měla zobrazit v okně vašeho prohlížeče. Na pozadí spustí IDE Express verze webového serveru služby IIS. V mém případě projekt používá port 54713 na localhost pro spuštění stránky:
http://localhost:54713/Debug/default-src.aspx

Jsme nyní připraveni pracovat v procesu vytváření JavaScript.

Integrace do procesu sestavení JavaScript do MSBuild

Tento projekt bude automatizovat dva klíčové kroky, je třeba vytvořit komplexní JavaScript projektu:

• Zřetězení: Shromažďovat všechny zdrojové soubory, které potřebujete pro konkrétní stránky a zřetězit dohromady do jednoho souboru. MSBuild nemá vestavěné funkce Concat úkol jako mravenec nebo NAnt, takže budeme muset vrátit vlastní na základě této vynikající blog jak na: zřetězit soubory pomocí MSBuild úkoly.
• Minify: Minify vlastní zdrojové soubory a zřetězit s výrobní verze soubory, stejně jako jQuery soubor do jednoho komprimovaného souboru.

Krok 1: Přepnout mezi úpravy sestavení souboru projektu a projektu

Složce, kde jste vytvořili váš projekt .NET bude obsahovat soubory, které vypadají jako jsou tyto:

Soubor NetTutsMSBuildJs.csproj je prostě soubor XML speciálně nakonfigurován pro zpracování procesu MSBuild pro tento projekt. Je to naprosto legitimní, aby jeden z nich ručně vytvořit nebo upravit tak, aby odpovídal projektu. Pochopitelně z důvodu čistě .NET je mnohem lepší použít Visual Studio GUI automaticky nakonfigurovat tento soubor pro vás, ale místo tohoto kurzu je ukázat vám jak přidat JavaScript sestavení, které není součástí standardní sestavení .NET.

V aplikaci Visual Studio tento soubor projektu nelze upravovat, pokud zavřete projekt a projekt nelze načíst, pokud je chyba syntaxe v souboru! Takže, praxe nakládce a projekt tak, aby můžete upravit tento soubor klíče. Chcete-li uvolnit projekt, klepněte pravým tlačítkem myši projekt a klepněte na položku uvolnit projekt.

Po uvolnění projektu, všechny složky a soubory zmizí a Vy jste odešel s právě řešení a projekty v Průzkumníku řešení. Klepněte pravým tlačítkem myši projekt a tentokrát místní nabídky je velmi krátká. Zvolte Upravit NetTutsMSBuildJs.csproj a otevře soubor konfigurace projektu.

Teď jen aby budovat důvěru a zvyknout si na ty časy, kdy nelze načíst projekt z důvodu chybu syntaxe v souborech projektu, které se zabývají zadejte uvážlivý omyl na začátku souboru projektu: stačí napsat dopis před první značku mimo X Struktura dokumentu ML. Uložte a zavřete soubor. Zkuste načíst projekt z místní nabídky a zobrazí se chybová zpráva oznamující, že projekt nelze načíst. Ano, Visual Studio je velmi přísná, jako je tento.

Znovu otevřete soubor projektu, opravte chybu, Uložit a zavřít znovu. Když znovu načíst projekt, by měla bez problémů načíst. Nyní je čas k úpravě doopravdy. Jsme pouze ručně změnit jednu věc v souboru projektu, a který bude přidat prvek importu, který bude importovat soubor k provedení JavaScript sestavení.

Krok 2: Vytvořit soubor sestavení pro sestavení JavaScript a importujte jej do souboru projektu.

Pokud přidáte prvek importu souboru projektu pro soubor, který neexistuje, nebude možné načíst projekt, tak vytvořte nový textový soubor s názvem js.build ve složce jsbuild. Po zadání nezbytných kód XML, IDE bude uznávat tento soubor jako soubor XML. Nebude nutné skutečně přidružit příponu vybudovat editoru XML. Zadat výchozí kód do jsbuild\js.build, Uložit a zavřít.

1

<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">

2

</Project>

Nyní zavřete projekt a upravte soubor projektu přidáním následujícího řádku na konci souboru těsně před uzavírací značky.

1

<Import Project="jsbuild\js.build" />

Nyní byste měli být schopni znovu načíst projekt.

Krok 3: Hello Zeměplocha!!!

Pět vykřičníků, jasná známka šílené mysli. -Terry Pratchett, sekáče

Trochu se nudím se říká "Hello World" na začátku každého nového IT kurz. Takže tentokrát, já jsem chtěl říct Ahoj Terry Pratchett Úžasná Zeměplocha.

Otevřete js.build. IDE by mělo automaticky Všimněte si, že je soubor XML. Pokud tomu tak není, možná máte neplatný kód XML. Po přidání následující kód nastavit zprávu Hello Zeměplocha, IDE by mělo konečně uvědomíte, že to je XML. Ujistěte se, že soubor js.build nyní obsahuje následující XML. Nezapomeňte na pět vykřičníků získat správnou chuť šílenství na Zeměploše!!!

1

<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">

2

  <Target Name="HelloDiscworld">

3

    <Message Text="Hello Discworld!!!!!" Importance="high"></Message>

4

  </<Target>

5

  <Target Name="AfterBuild">

6

    <CallTarget Targets="HelloDiscworld"></CallTarget>

7

  <Target>

8

</Project>

Klepněte pravým tlačítkem myši na projekt a spusťte sestavení, zobrazí se zpráva v okně výstup.

Jako mravenec používá MSBuild myšlenku cílů skupiny úloh. AfterBuild cíl je automaticky spuštěn MSBuild, po všechno ostatní byla úspěšně vytvořena. Jsem připínání JavaScript sestavení na konci sestavení .NET, takže bod rozšíření AfterBuild zdá nejlepší místo pro to. Všimněte si, jak je automaticky spuštěn AfterBuild a v rámci AfterBuild nazýváme naše cíle HelloDiscworld. Postavil jsem důležitost zprávy na vysoké, protože jinak nemusí zobrazit v okně výstup.

Krok 4: Vyřešit cesty

Dobře. Šli jsme ještě trochu šílený na Zeměploše, s příliš mnoho vykřičníků, ale v nejméně naše sestavení soubor JavaScript se zdá být pracovní! Ok. Legraci stranou, teď musíme dostat nejdůležitější věc v rutina sestavení správné: cesty.

Jako s Ant, vždy jsem měl potíže s absolutní a relativní cesty v těchto konfiguračních souborů, takže chci našlapovat opatrně. Přidat prvek PropertyGroup do horní části souboru js.build, těsně pod značku projektu a přidat dvě vlastnosti jako je tento.

1

  <PropertyGroup>

2

    <ConcatDir>debug-js\concat</ConcatDir>

3

    <MinDir>debug-js\min</MinDir>

4

  </PropertyGroup>

Teď změnit zprávy, abychom viděli, co tyto vlastnosti obsahují:

1

<Message Text="Hello Discworld!!!!! from $(ConcatDir)" Importance="high"></Message>

Můžete čistit a znovu sestavte projekt nebo zvolte rebuild. Zpráva se zobrazí v výstup podobný tomuto:

Dobrý den, Zeměplocha!!! od ladění js\concat

Krok 5: Vytvoření čisté a Init se zaměřuje na

Milé. Máme naše životní prostředí, naše zdrojové soubory a my máme vlastnosti v souboru sestavení, který obsahuje relativní cesty směřující do adresáře, který potřebujeme pracovat s. Nyní můžeme přidat CleanJs cíl a cíl InitJs, odstranit a vytvořit adresáře concat a min. Mám zvyk dávat malé "hello" zprávy v k dosažení těchto cílů při vývoji tyto soubory jen proto, aby znovu zapovězené jsou ve skutečnosti spuštěn nebo kontrola hodnoty vlastností. Připadá mi zvýšit podrobnost výstup v MSBuild má tendenci mi záplava informací, které nepotřebuji, ale je to skvělé, když není jasné, kde jsem udělal chybu.

MSBuild používá jednoduché relativní cesty z kořenové složky celého projektu. Pokud máte složku s názvem js v projektu, můžete použít hodnotu js v pojmenované vlastnosti v PropertyGroup bez dalších komplikací.

1

  <Target Name="CleanJs">

2

    <Message Text="Hello from CleanJs" Importance="high"></Message>

3

    <RemoveDir Directories="$(ConcatDir)" Condition="Exists('$(ConcatDir)')">

4

      <Output PropertyName="ConcatDirRemoved" TaskParameter="RemovedDirectories"/>

5

    </RemoveDir>

6

    <RemoveDir Directories="$(MinDir)" Condition="Exists('$(MinDir)')"></RemoveDir>

7

    <Message Text="Hello from removed dirs $(ConcatDirRemoved)" Importance="high"></Message>

8

  </Target>

9

  <Target Name="InitJs">

10

    <MakeDir Directories="$(ConcatDir)" Condition="!Exists('$(ConcatDir)')"></MakeDir>

11

    <MakeDir Directories="$(MinDir)" Condition="!Exists('$(MinDir)')"></MakeDir>

12

  </Target>

Chcete-li spustit tyto cíle CallTarget prvky přidat AfterBuild cíl.

1

    <CallTarget Targets="CleanJs"></CallTarget>

2

    <CallTarget Targets="InitJs"></CallTarget>

Krok 6: Zřetězení soubory

Jste pravděpodobně zvyklí úpravou souboru js.build do teď. Možná jste si všimli, obtěžující chybová zpráva spojené s text podtržený kroucený modré čáry, jako je tento:

To je nepříjemný bug v Visual Studio, který je tam už docela dlouho. PropertyGroup prvky a ItemGroup prvky lze naplnit s libovolnou hodnotou, které se vám líbí. Problém je, že Visual Studio nesprávně hlásí chybu pro první vlastnosti nebo položky, které definujete v jedné z těchto skupin. Jak jste viděli, ConcatDir funguje, když sestavíte projekt a neexistuje žádný problém načítání projektu. Prostě ignorujte tyto rušivé chyby neplatný podřízený prvek.

Konečně některé skutečné sestavení práce. Jsme přidali nový cíl zřetězit soubory, které chceme. Na rozdíl od Ant a NAnt neexistuje žádné vestavěné funkce Concat úkol, takže budeme muset vrátit vlastní s ReadLinesFromFile úkolu

1

  <Target Name="ConcatenateJsFiles">

2

    <ItemGroup>

3

    <ConcatFiles Include="

4

                 js\jquery-1.8.2.min.js;

5

                 js\jquery-ui-1.9.2.custom.min.js;

6

                 debug-js\src\jquery.ui.menubar.js;

7

                 js\knockout-2.1.0.js;

8

                 debug-js\src\default-src.js

9

                 "/>

10

    </ItemGroup>

11

    <ReadLinesFromFile File="%(ConcatFiles.Identity)">

12

      <Output TaskParameter="Lines" ItemName="ConcatLines"/>

13

    </ReadLinesFromFile>

14

    <WriteLinesToFile File="debug-js\concat\default-concat.js" Lines="@(ConcatLines)" Overwrite="true" />

15

  </Target>

Přidáte nový prvek CallTarget AfterBuild cíle v js.build volání ConcatenateJsFiles. Znovu sestavte projekt jako obvykle a hle, a hle, soubor s názvem výchozí concat.js magicky získá vytvořen v adresáři debug-js\concat. Budete pravděpodobně muset aktualizovat Průzkumník řešení zobrazíte.

Nyní přidejte novou stránku webové formuláře s názvem výchozí concat.aspx složce, napojenou na stránce Main.Master. To je velmi krátká a mírně liší od výchozí src.aspx stránky. Tentokrát se vše, co potřebujeme JavaScript má byla zřetězeny do jednoho souboru, takže stačí pouze jeden skript tag odkaz na výchozí concat.js.

1

<%@ Page Title="Default concat" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="Default-src.aspx.cs" Inherits="NetTutsMsBuildJs.debug.Default_src" %>

2

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

3

</asp:Content>

4

<asp:Content ID="Content2" ContentPlaceHolderID="JsScripts" runat="server">

5

    <script src="/debug-js/concat/default-concat.js"></script>

6

</asp:Content>

Chcete-li to vyzkoušet, otevřete stránku výchozí concat.aspx v okně IDE a znovu spusťte projektu v režimu ladění. Měli byste vidět plně funkční menu v prohlížeči s concat ladění název v záhlaví okna prohlížeče.

Krok 7: Závěrečná fáze - Minifying

Konečný cíl, cíl!!!

Zdá se, že naše menu pracovat a když jsme zřetězit soubory zdá se, že jsme dostali správné pořadí a všechno jde hladce na stránce ladění concat.aspx. Teď je konečně čas na minify zdrojové soubory výchozí src.js a jquery.ui.menubar.js a zřetězit s profesionální vydání soubory ve správném pořadí. To je poněkud složitější, protože teď musíme přinést v vnější závislosti, které zatím ještě potřebujeme: YUI kompresor. Je port rozhraní .NET ve vývoji, ale jsem zvyklá, že verze Java, raději používat své staré oblíbené. Vytvořte nový cíl nazývá MinifyJsFiles takto:

1

  <Target Name="MinifyJsFiles">

2

    <ItemGroup>

3

      <MinFiles Include="

4

                 debug-js\src\jquery.ui.menubar.js;

5

                 debug-js\src\default-src.js

6

           "/>

7

      <Compressor Include="jsbuild\yuicompressor-2.4.7.jar"></Compressor>

8

    </ItemGroup>

9

    <Message Text="Hello Compressor.Fullpath: %(Compressor.Fullpath)" Importance="high"></Message>

10

    <Exec Command="java -jar %(Compressor.Fullpath) debug-js\src\default-src.js --type js -o debug-js\min\default-min.js"/>

11

    <Exec Command="java -jar %(Compressor.Fullpath) debug-js\src\jquery.ui.menubar.js --type js -o debug-js\min\jquery.ui.menubar-min.js"/>

12

13

  </Target>

Všimněte si vlastnosti kompresoru. Zde je jen nutné definovat relativní cestu z adresáře projektu, ale jar soubor, spusťte Java procesem, bude potřebovat úplnou cestu. Naštěstí MSBuild poskytuje snadný způsob, jak převést relativní cestu na úplnou cestu. Použijte syntaxi % a vyvolat Fullpath vlastnost. Toto je příklad MSBuild Well-known Item Metadata.

Přidejte ještě další CallTarget prvek k prvku AfterBuild volat MinifyJsFiles cíl.

Nyní naše poslední cíl, cíl. Musíme přijmout všechny soubory profesionální release a zřetězit s zmenšenou verzi našich zdrojů a zřetězit do jednoho souboru.

1

  <Target Name="ConcatenateMinFiles">

2

    <ItemGroup>

3

    <ConcatMinFiles Include="

4

                      js\jquery-1.8.2.min.js;

5

                      js\jquery-ui-1.9.0.custom.min.js;

6

                      debug-js\min\jquery.ui.menubar-min.js;

7

                      js\knockout-2.1.0.js;  

8

                      debug-js\min\default-min.js

9

                      "/>              

10

    </ItemGroup>

11

    <ReadLinesFromFile File="%(ConcatMinFiles.Identity)" >

12

      <Output TaskParameter="Lines" ItemName="ConcatMinFilesLines"/>

13

    </ReadLinesFromFile>

14

    <Message Text="We are concatenating these minified files %(ConcatMinFiles.Identity)" Importance="high"></Message>

15

    <WriteLinesToFile File="debug-js\min\default.js" Lines="@(ConcatMinFilesLines)" Overwrite="true" />

16

   </Target>

Musíte být opatrní s touto ItemName vlastnost v souborech build. Instance vlastnosti a položky jsou uloženy v globálním kontextu v MSBuild. Pokud použijete stejný název pro ItemName ve dvou různých spojených cílů, skončíte zřetězení všechny soubory z obou cílů.

Znovu sestavte projekt a nyní byste měli vidět dva nové soubory ve složce ladění js\min: výchozí min.js a jquery.ui.menubar-min.js. Debug-js složky by měl nyní vypadat takto po přestavbě a aktualizaci Průzkumník řešení:

Vytvořte novou stránku webových formulářů názvem výchozí min.aspx spojené s Main.Master stránky a umístit jej do složky ladění.

1

<%@ Page Title="Default min" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="Default-src.aspx.cs" Inherits="NetTutsMsBuildJs.debug.Default_src" %>

2

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

3

</asp:Content>

4

<asp:Content ID="Content2" ContentPlaceHolderID="JsScripts" runat="server">

5

    <script src="/debug-js/min/default-min.js"></script>

6

</asp:Content>

Závěr

Šli jsme přes kroky požadované v aplikaci Visual Studio Express 2012 for Web, vytvořit JavaScript projekt, který si vezme Knockout s jQuery UI vytvořit panel nabídek a pak integrovat sestavení JavaScript do celkové sestavení projektu v aplikaci Visual Studio.

V tomto tutoriálu, jsme šli přes kroky požadované v aplikaci Visual Studio Express 2012 for Web vytvořit JavaScript projekt, který si vezme Knockout s jQuery UI vytvořit panel nabídek ze souboru definice JSON a potom integrovat JavaScriptu sestavit ze zdrojových souborů do procesu .NET MSBuild. Konečný výsledek byl, že jsme měli webovou stránku s pouze jeden skript tag obsahující všechny komplexní JavaScript potřebné ke spuštění na stránce.

Myslím, že můžete vidět, jak snadné je přizpůsobit tento příklad rozsáhlé a komplexní JavaScript knihovny běží v .NET projektu. Mělo by být přiměřeně jednoduché tyto myšlenky zahrnout úkoly, které jsou vhodné pro vydanou verzi. Zřejmé, dalším krokem je zkopírovat soubor default.js plně minified a spojených do js složky, pak patří, že v konečném souboru Default.aspx v kořenovém adresáři. V tomto příkladu jako výchozí bod je třeba schopen zkoumat dokumentaci MSBuild a rozvíjet plně pracovní soubor sestavení pro automatizaci celého procesu sestavení.

Já také použít tento druh přístupu pro soubory CSS. V tomto konkrétním případě jQuery UI CSS soubory jsou tak dobře optimalizovaná, sotva zdálo se, že stojí za to minifying nich, ale v jiných projektech může být důležité pro výkon. Sofistikovanější dalším krokem pro vás grunters tam by bylo vytvořit soubor js.build, který spouští soubor grunt s MSBuild Exec úkol. Tímto způsobem, můžete snadno zahrnout lintingu a testování do procesu sestavení.

Další čtení

Další informace o Visual Studio, tento vynikající Nettuts + Visual Studio: Web Dev Bliss vás povede jak integrovat Web Essentials a přidat kód kontroly procesu sestavení, ale bohužel, není k dispozici pro edice Express Web Essentials. Najdete tu odpověď Mads Kristensen: ".. .unfortunately Express neumožňuje rozšíření třetích stran k instalaci". Tento kurz je zaměřena na uživatele Express Edition a doufám, že to vám dal výchozí bod pro vytvoření vlastní integrované sestavení JavaScript v prostředí Visual Studio Express.