Ant ile Css ve Js'leri Birleştirip Küçültmek

S.a. Arkadaşlar,

Uzun süredir yazamıyordum, klasik olacak ama iş-güç-yoğunluk. Bugün anlatmaya çalışacağım konu back-end değil front-end ile ilgili olacak. Yani arka tarafa yönelik değil de ön tarafı ilgilendiren bir konu olacak. Elimizde bulunan .js ve .css dosyalarını birleştirip onları sıkıştıracağız. Tabi öncelikle bunun için Ant'a ihtiyacımız olacak. Ant'ın kurulumunu buradan izleyebilirsiniz. Biz ant kurulu olarak yolumuza devam edeceğiz ve bununla birlikte YUI Compressor'a ihtiyacımız olacak.



Ana klasörümüz altında build,src  klasörleri ve tabi ki build.xml dosyası olacak. Daha sonra işlemimizi bittirdiğimizde dist klasörü de oluşacaktır. Şuan itibariyle dosya görünümü
root
|-- build
|   `-- yuicompressor-2.4.2.jar
|-- src
|   |-- css
|   |   |-- base.css
|   |   |-- fonts.css
|   |   |-- reset.css
|   |   `-- style.css
|   |-- js
|   |   |-- samaxesjs.core.js
|   |   `-- samaxesjs.toc.js
|   `-- index.html
`-- build.xml

Şimdi build.xml dosyası üzerinden devam edeceğiz. Küçük parçalar alıp kodumuzu açıklayacağız. Daha sonra tüm projeyi vereceğiz.

<property name="SRC_DIR" description="Source folder" value="src"/>
<property name="SRC_CSS_DIR" description="CSS source folder" value="${SRC_DIR}/css"/>
<property name="SRC_JS_DIR" description="JavaScript source folder" value="${SRC_DIR}/js"/>
<property name="DIST_DIR" description="Output folder for build targets" value="dist"/>
<property name="DIST_CSS_DIR" description="Output folder for CSS files" value="${DIST_DIR}/css"/>
<property name="YUI" description="YUICompressor" value="${BUILD_DIR}/yuicompressor-2.4.2.jar"/>

Burada kaynak dosyalarımızın yollarını belirtiyoruz. .js ve .css dosyaları nereden okuyacağımızı da biliyoruz ve daha sonra da onları kayıt edeceğimiz yerleri de belirtiyoruz. Son satırda da eklediğimiz jar'ın yolunu gösteriyoruz. Şimdilik bu tanımlamalar böyle. Tabi kodların hepsini eklemedik.


<target name="css" description="Concatenate CSS source files" depends="html">

<!--Aşağıda verilen dosyalar style.css'a kaydediliyor. -->
<concat destfile="${CSS}">
<!--Burada da tek tek elle girmek istemezsek *.css diye girebiliriz-->
<!--Ayrıca alt klasördekileri de almak istersek o zaman **/*.css koymalıyız -->
<!-- <fileset  dir="${SRC_CSS_DIR}"    includes="**/*.css" /> -->
     <fileset dir="${SRC_CSS_DIR}" includes="reset.css"/>
     <fileset dir="${SRC_CSS_DIR}" includes="fonts.css"/>
     <fileset dir="${SRC_CSS_DIR}" includes="base.css"/>
     <fileset dir="${SRC_CSS_DIR}" includes="style.css"/>
     </concat>
     <echo message="${CSS} built."/>
</target>

<!-Oluşturulan sytle.css ->style.min.css olarak sıkıştırılıyor -->
<target name="css.min" description="Minimize CSS files" depends="css">
    <echo message="Building ${CSS_MIN}"/>
-   <apply dest="${DIST_CSS_DIR}" verbose="true" parallel="false" executable="java">
-   <fileset dir="${DIST_CSS_DIR}">
            <include name="style.css"/>
      </fileset>

     <arg line="-jar"/>
     <arg path="${YUI}"/>
    <arg value="--charset"/>
    <arg value="ANSI"/>
     <arg value="-o"/>
     <targetfile/>

<mapper to="style.min.css" from="style.css" type="glob"/>
</apply>
<echo message="${CSS_MIN} built."/>
</target>

.css için yapılan işlemler .js için de yapılıyor. Onları tekrar göstermiyoruz. Projede mevcut.

<target name="all" depends="clean, html, css, css.min, js, js.min">
     <echo message="Build complete."/>
</target>

Burada ise all komutu sonucu çalışan target'ları ekliyoruz. Buraya eklemediğimiz target çalışma dosyasında gözükmez. Buna dikkat edin.

Windows kullanıcısı iseniz cmd ekranı ile ant clean all/ant all yazıp kodunuzu çalıştırdığınızda artık dist klasörü de eklenecektir ve projenin son hali aşağıdaki gibi olacaktır.

root
|-- build
|   `-- yuicompressor-2.4.2.jar
|-- dist
|   |-- css
|   |   |-- style.css
|   |   `-- style.min.jcss
|   |-- js
|   |   |-- samaxesjs.js
|   |   `-- samaxesjs.min.js
|   `-- index.html
|-- src
|   |-- css
|   |   |-- base.css
|   |   |-- fonts.css
|   |   |-- reset.css
|   |   `-- style.css
|   |-- js
|   |   |-- samaxesjs.core.js
|   |   `-- samaxesjs.toc.js
|   `-- index.html
`-- build.xml

Bu konuyu buradaki siteden elimden geldiğince kendime göre değiştirerek bazı değişiklikler yaptım ve sizlerle de paylaşmak istedim. Daha ayrıntılı bilgi için buraya uğrayabilirsiniz.

Malik Masis Chanbaz
Apprentice of Knowledge