Posts Tagged ‘JavaScript’

Kurczymy skrypty javascript – Microsoft Ajax Minifier

lis 30, 2009 ASP.NET AJAX

Jakiś czas temu Microsoft wydał bardzo przydatne narzędzie umożliwiające kompresję tworzonych skryptów JavaScript – MS Ajax Minifier.

Oczywiście nie jest to pierwsze/jedyne tego typu narzędzie – ale dużym plusem Ajax Minifiera jest możliwość “podpięcia” go do projektu jako task MSBuilda.

Narzędzie pobieramy ze strony http://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=35893

Po zainstalowaniu nowy task MSBuilda wyląduje w katalogu:
C:\Program Files\MSBuild\Microsoft\MicrosoftAjax lub C:\Program Files (x86)\MSBuild\Microsoft\MicrosoftAjax, jeżeli korzystamy z systemu 64-bitowego.

Aby dodać nowego taska do projektu edytujemy plik naszego projektu (csproj) – możemy to oczywiście zrobić w dowolnym edytorze, np. Notepad2.

I dodajemy kilka nowych linijek:

minifier1

1. Dodajemy referencje do taska MSBuild (MSBuildExtensionsPath wskazuje na C:\Program Files\MSBuild\Microsoft\MicrosoftAjax)

2. W sekcji Include podajemy, które pliki chcemy zminimalizować (w pokazanym przypadku wszystkie pliki js); w sekcji Exclude, które chcemy opuścić  – czyli pliki min.js (te, które już są zminimalizowane) oraz wszystkie pliki js z katalogu extLib – tutaj przykładowo przechowujemy różne biblioteki.

3. Podajemy, w jaki sposób zostanie wygenerowana nazwa nowego (zminimalizowanego) pliku – tutaj pliki z rozszerzeniem .js zostaną zamienione na .min.js.

Teraz wystarczy już tylko odpalić projekt i go przebildować, a w naszym projekcie pojawią nowe pliki:

minifier2

W wyniku minimalizacji z oryginalnego pliku zostaną usunięte wszystkie zbędne “białe znaki” oraz komentarze. Oczywiście plik oryginalny nie zostanie w żaden sposób zmieniony.

Przykładowy plik przed minimalizacją

minifier3

i po:

minifier4

Przydatności MS Ajax Minifiera (w połączeniu z łatwością jego użycia) nikomu chyba tłumaczyć nie trzeba. Minimalizując pliki aplikacji webowej zwiększamy szybkość  ich “ładowania”, dzięki czemu nasza aplikacja działa szybciej – i to wszystko automatycznie.

MS Ajax Minifiera można również uruchamiać z linii poleceń – jednak jako osoba ceniąca wygodę preferuję opisane rozwiązanie.

Miłej zabawy :)

Tags: , ,

ScriptManager: EnableCdn="true"

wrz 17, 2009 ASP.NET 4.0

Parę dni temu Microsoft uruchomił usługę Microsoft Ajax CDN umożliwiającą pobieranie bibliotek javascript (związanych z Microsoft AJAX) z serwerów Microsoftu. Wykorzystanie Microsoft Ajax CDN pozwala zwiększyć “szybkość” działania aplikacji – używane biblioteki są cachowane i szybciej wysyłane do klienta.

Najbardziej mnie jednak cieszy fakt dodania property EnableCdn, umożliwiających wykorzystanie Microsoft Ajax CDN do ładowania skryptów, które do tej pory automatycznie były pobierane z bibliotek System.Web.dll oraz System.Web.Extensions.dll, czyli zamiast standardowego:

<script src="/ScriptResource.axd?d=gbruZflV-cd1gZnUdPOxDZcPjj4iD1Hix9fWmdpjOFQzRXbkQcZ2wc0n-Dt1NPH2RQJC2J0S8AHa_9qVldKC2T0CHE2p0Pg6O5j986Okf1M1&&t=ffffffff87dfba72" type="text/javascript"></script>

uzyskamy

<script src="http://ajax.Microsoft.com/ajax/beta/0909/MicrosoftAjax.debug.js" type="text/javascript"></script>

Very cool :)

Lista dostępnych bibliotek znajduje się na stronie:
http://www.asp.net/ajax/cdn/

Więcej informacji o Microsoft Ajax CDN na stronie ScottaGu:

http://weblogs.asp.net/scottgu/archive/2009/09/15/announcing-the-microsoft-ajax-cdn.aspx

Tags: , , , ,

Intellisense dla jQuery i innych bibliotek javascript

mar 19, 2009 ASP.NET, jQuery

W Visual Studio 2008 mamy możliwość korzystania z intellisense dla różnych bibliotek javascript. Aby jednak korzystać z tego dobrodziejstwa musimy:

Po instalacji tych elementów możemy korzystać z instellisense dla różnych bibliotek javascript. Oczywiście biblioteki te musimy zadeklarować na naszej stronie.


<script src="js/mylibrary.js" type="text/javascript"></script>

Poza standardowym “podpowiadaniem” funkcji/metod/itp. dla bibliotek js, path ten umożliwia korzystanie również z dokumentacji. Dokumentację tworzymy pisząc komentarze podobne do komentarzy z C#, np.:


function TestFunction(imie) {
///	Przykładowa funkcja javascript
///     Pierwszy parametr funkcji
///	Wartość zwracana
return "test";
}

JavaScript intellisense

Funkcjonalność patha jest bardzo przemyślana i umożliwia korzystanie z komentarzy umieszczonych w innym pliku niż nasza biblioteka.  Jak wiadomo, pliki javascript powinny być jak najmniejsze, a tworzenie w nich dokumentacji na pewno w tym nie pomaga :)

Kolejność przeszukiwania plików w poszukiwaniu dokumentacji wygląda tak:

  • mylibrary-vsdocs.js
  • mylibrary-debug.js
  • mylibrary.js

Jeżeli nie zostanie znaleziony plik mylibrary-vsdocs.js szukany jest mylibrary-debug.js, itd. Oczywiście deklarujemy tylko mylibrary.js – plik z dokumentacją powinien jednak znajdować się w tym samym katalogu (jednak nie musi być nawet includowany w projekcie).

JavaScript intellisense

Jeżeli deklaracja pliku js znajduje się innym pliku (np. w MasterPage), wtedy w naszym pliku musimy podać referencję:


/// <reference path="js/mylibrary.js" />

lub


/// <reference path="Default.aspx" />

Wszystkich, którzy piszą w jQuery z pewnością ucieszy fakt, iż od jakiegoś czasu przygotowywane są pliki z dokumentacją do tej biblioteki.

Dokumentację znaleźć można na stronie jQuery.

JavaScript intellisense

Tags: ,