«
»

Ant, Rhino, YUICompressor & JS Packer

Dec 21 2008

დაახლოვებით ერთი წლის წინ ზედაპირულად შევეხე JavaScript ფაილების კომპრესიას. ძველი პოსტის მიხედვით თუ ვიმსჯელებთ არცთუ ისე ცუდი შედეგია. თუმცა რამდენიმე დეტალი მაინც საჭიროებს გადახედვას, კერძოდ კი:

  • JavaScript ფაილების კომპრესიის პროცესი არ არის ავტომატიზებული;
  • ფაილების კომპრესია მთლიანად ეყრდნობა დენ ედვარდსის ე.წ Packer – ს რომელიც გარკვეულ მიზეზთა გამო საკმაოდ მოუხერხებელია;

პირველ რიგში სანამ გადავალთ უშუალოდ ფაილების კომპრესიის ავტომატიზაციის პროცედურაზე საჭიროა საბოლოო ამოცანის სრულად ჩამოყალიბება.

მიზანი

  • JavaScript ფაილების გაერთიანება და ერთი საბოლოო ფაილის მიღება;
  • გაერთიანების შედეგად მიღებული ფაილის მინიფიკაცია და ობფუსკაცია;
  • მინიფიცირებული ფაილის ზომაში კიდევ უფრო მეტად შემცირება base62 კოდირებით;
  • საბოლოო ფაილის gzip კომპრესია;


პირველ რიგში მანამდე სანამ შევუდგებით JavaScript ფაილების კომპრესიის პროცესს მოვამზადოთ შესაბამისი გარემო, პირველ რიგში თქვენთვის მოსახერხებელ მისამართზე შექმენით კატალოგების შემდეგი სტრუქტურა:

project
    tools
    src
    build

ჩამოთვლილი პუნქტების რეალიზაციისათვის პოსტის სათაურში ნახსენები უტილიტებს გამოვიყენებთ.

უფრო კონკრეტულად კი მიზნის მისაღწევად დაგვჭირდება:

  • Apache Ant – თუ გიყენიათ JDK მას დამატებითი ინსტალაცია არ ესაჭიროება;
  • მოზილას Rhino – JavaScript for Java, JavaScript კოდის შესასრულებლად. გადმოწერეთ ბოლო ვერსია გახსენით არქივი და დააკოპირეთ js.jar ფაილი /project/tools კატალოგში;
  • ჟულიენ ლეკომტეს მიერ შექმნილი YUICompressor რომელსაც გამოვიყენებთ JavaScript ფაილების მინიფიკაციისა და ობფუსკაციისათვის. გადმოწერეთ ბოლო ვერსია გახსენით არქივი დააკოპირეთ build კატალოგში არსებული yuicompressor-2.x.x.ჯარ ფაილი /project/tools კატალოგში, შეუცვალეთ მას სახელი და დაარქვით yuicompressor.jar;
  • დენ ედვარდსის Packer რომლის მეშვეობითაც შევამცირებთ უკვე მინიფიცირებულ ფაილის მოცულობას
  • ჩემს მიერ დაწერილ პატარა სკრიპტი რომელიც საშულებას მოგვცემს Ant სკრიპტიდან გამოვიძახოთ Packer – ის pack მეთოდი მინიფიცირებული კოდის base62 კოდირებისათვის. ფაილი აერთიანებს როგორც ჩემს მიერ დაწერილ კოდს, ასევე დენ ედვარდსის Packer – ს. გადმოწერეთ ფაილი და დააკოპირეთ იგი /project/tools კატალოგში

სამუშაო გარემოს დასასრულებლად /project კატალოგში შექმენით ცარიელი build.xml ფაილი.
საბოლოო ჯამში მივიღებთ კატალოგებისა და ფაილების ასეთ სტრუქტურას:

project
    tools
        js.jar
        yuicompressor.jar
        pack.js
    src
    build
    build.xml

მანამდე სანამ შევუდგებით ფაილების უშუალო კომპრესიას /project/src კატალოგში დააკოპირეთ თქვენთვის სასურველი/საჭირო JavaScript ფაილები. ამ პოსტის წერისას, ტესტირებისათვის გამოვიყენე ორი ფაილი, jquery-1.2.6.js და jQuery – ს პლაგინი jquery.form.js .

დროა შევუდგეთ Ant სკრიპტის წერას რომლის მეშვეობითაც გავაერთიანებთ ფაილებს, გამოვიძახებთ შესაბამის უტილიტებს საჭირო პარამეტრებით და მივიღებთ საბოლოო შედეგს.

<?xml version="1.0" encoding="UTF-8"?>
<project name="MyProject" default="build" basedir=".">

    <!-- Source Directory -->
    <property name="src" value="src" />
    <!-- Build Directory -->
    <property name="build" value="build" />
    <!-- Tools Directory -->
    <property name="tools" value="tools" />

    <target name="init">
        <!-- Cleanup build folder -->
        <delete>
            <fileset dir="${build}" includes="**/*.*"/>
        </delete>
    </target>

    <target name="build" depends="init">
        <!-- Concatenate source files -->
        <concat destfile="${build}/library.js">
            <filelist dir="${src}" files="jquery-1.2.6.js,jquery.form.js"/>
        </concat>
        <!-- Minify concatenated file with YUICompressor -->
        <java fork="true" jar="${tools}/yuicompressor.jar">
            <arg line="-o ${build}/library.min.js ${build}/library.js" />
        </java>
        <!-- Pack minified file with Dean Edwards' Packer -->
        <java fork="true" jar="${tools}/js.jar">
            <arg line="${tools}/pack.js ${build}/library.min.js ${build}/library.pack.js" />
        </java>
    </target>

</project>

ნაჩვენები Ant სკრიპტის დეტალების განხილვა სცილდება ამ პოსტის მიზანს, თუმცა ყველა მნიშნველოვან დირექტივას თანდართული აქვს კომენტარები ზოგადი წარმოდგენის შესაქმნელად.

სკრიპტის შექმნის შემდეგ ტერმინალიდან შედით თქვენი პროექტის კატალოგში და აკრიფეთ შემდეგი ბრძანება:

ant

პროცესის დასრულების შემდეგ ტერმინალში დაინახავთ დაახლოვებით მსგავს შედეგს:

Buildfile: /Users/iosebdzmanashvili/Sites/test/pack/build.xml
init:
build:
     [java] completed...
BUILD SUCCESSFUL
Total time: 17 seconds

მაშ ასე ფაილების გაერთიანების, მინიფიკაციის, ობფუსკაციისა და კოდის base62 კოდირებაში გადაყვანის პროცესი დასრულებულია. თუ შეხვალთ /project/build კატალოგში, დაგხვდებათ სამი ფაილი:

  • library.js – რომელშიც გაერთიანებულია ზემოთ ნახსენები ორი JS ფაილი. ამ ფაილის ზომა დაახლოვებით 124KB – ს შეადგენს;
  • library.min.js – YUICompressor – ის მეშვეობით მინიფიცირებული ფაილი რომლის ზომაც დაახლოვებით 64KB – ა;
  • library.pack.js – Packer – ის მეშვეობით base62 კოდირებაში გადაყვანილი ფაილი რომლის ზომაც დაახლოვებით 36KB – ა;

დამერწმუნებით რომ შედეგი თვალსაჩიანოა და დამატებით კომენტარებს არ საჭიროებს, 124KB – დან საბოლოო ფაილი დავიყვანეთ 36KB – მდე რაც უდავოდ მნიშვნელოვანი სხვაობაა. თუ ამ ფაილს დამატებით პოსტის დასაწყიში ნახსენები მეთოდით დავამუშავებთ მისი ზომა დაახლოვებით 20KB – მდე დავა რაც თავისთავად ასევე მნიშვნელოვანია.

რეზიუმეს სახით ასევე მნიშვნელოვანია რამდენიმე დეტალი. თუ ფაილის მინიფიკაციის პროცესს შევასრულებდით მხოლოდ Packer – ის გამოყენებით, მივიღებდით დაახლოვებით იგივე შედეგს. თუმცა არსებობს ერთი საჩოთირო დეტალი რამაც YUICompressor – ის ჩართვისაკენ მიბიძგა.

როდესაც ვიყენებთ Packer – ს, მნიშნველოვანია გავითვალისწინოთ რომ ნებისმიერი ფუნქცია რომელსაც აღვწერთ სხვა ფუნქციისა ან მეთოდის შიგნით უნდა მთავრდებოდეს წერტილ მძიმით “;”. თუ ეს პირობა არ არის დაცული Packer – ის მიერ დაპატარავებული ფაილი უსარგებლო იქნება. ამ პროლემას აგვარებს YUICompressor, რადგან იგი ასეთ ფუნქციებს ავტომატურად ასრულებს წერტილ მძიმით ხოლო შედეგად ვღებულობთ სუფთა, Packer – ისათვის გამოსადეგ კოდს. მაგალითში ნაჩვენებია ასეთი შემთხვევა:

1
2
3
4
5
function myFunction() {
    var myPrivateFunction = function() {
       //rest of code here
    } //აქ აუცილებელია წერტილ მძიმე
}

სამწუხაროდ Packer – ს არ აქვს იმის უნარი რომ ასეთი მცირე პრობლემები მოაგვაროს თავისით, თუმცა როგორც უკვე აღვნიშნე ამ პრობლემის თავიდან არიდება შესაძლებელია YUICompressor – ის მეშვეობით.

ასევე ყურადღებას შევაჩერებ ჩემს მიერ დაწერილ პატარა სკრიპტზე რომლის მეშვეობითაც ხდება მინიფიცირებული კოდის base62 კოდირებაში გადაყვანა. სკრიპტი არის Rhino – ს რამდენიმე სტრიქონი კლიენტი რომლის შესრულებაც შესაძლებელია ტერმინალიდან. მას ესაჭიროება ორი პარამეტრი: 1) საწყისი ფაილი რომლის კოდირებაც გვესაჭიროება; 2) საბოლოო ფაილის სახელი;

Rhino – ს კლიენტი კითხულობს პირველ პარამეტრად გადაცემული ფაილიდან JavaScript კოდს, იძახებს Packer – ის pack მეთოდს შესაბამისი პარამეტრებით, და მიღებულ შედეგს ინახავს შესაბამის ფაილში:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
output = java.io.FileWriter(arguments[1]);  //obtain FileWriter object
output.write(
    pack(                                   //invoke Dean Edward's packer function
        readFile(                           //read input file: http://www.mozilla.org/rhino/shell.html
            arguments[0]                    //input file path
        ),            
        62,                                 //base62 encode
        0                                   //shrink variable names?
    )
);
output.close();
print('completed...');

//Dean Edwrads' Packer code here

ტეგები: , ,

One Response to “Ant, Rhino, YUICompressor & JS Packer”

  1. Levani says:
    March 21, 2009 at 11:46 am

    Packer-ის ლინკი გაასწორე რა გთხოვ

დატოვე კომენტარი:

ქართული კლავიატურა, ჩართვა/გამორთვა კლავიშით "~"