HTML5-Tutorium: Canvas: Hello World 03

Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen:

Korrektheit: 4 (großteils überprüft)

Umfang: 4 (unwichtige Fakten fehlen)

Quellenangaben: 5 (vollständig vorhanden)

Quellenarten: 5 (ausgezeichnet)

Konformität: 4 (sehr gut)

HTML-Tutorium Hello World: JavaScript | Canvas | SVG

Inhalt | Teil 1 | Teil 2

Ergebnis: hello.html (SVN-Repository)

HTML5: Hello-<name>-Anwendung mit Canvas

Die in Teil 2 erstellten JavaScript-Dateien der Hello-World-Anwendung sollen komprimiert werden, um die Zugriffszeiten zu beschleunigen. Dies erfolgt mit Hilfe des Tools YUI Compressor<ref>YUI Compressor

Neues Projekt anlegen

Legen Sie ein neues Projekt an

1. Datei → Neu → Statisches Web-Projekt
2. Project name: HelloWorldCanvas03 → Fertigstellen

Kopieren Sie die Dateien js/main.js, css/main.css und hello.html in den Ordner WebContent des neuen Projektes.

Ändern Sie die Zeilen

    <link rel="stylesheet" href="css/main.css" />
    <script src="js/main.js" type="text/javascript"></script>

in

    <link rel="stylesheet" href="css/all.min.css" />
    <script src="js/all.min.js" type="text/javascript"></script>

Wenn man nun das Projekt testet, passiert nicht viel, da es die Dateien all.min.css und all.mim.js noch nicht gibt.

CSS- und JavaScript-Dateien komprimieren

1. YUI Compressor (yuicompressor-2.x.x.zip) herunterladen
2. yuicompressor-2.x.x.zip in den Ordner C:\web\eclipse\dropins entpacken
3. Ordner C:\web\eclipse\dropins\yuicompressor erstellen

Fügen Sie in den Ordner C:\web\eclipse\dropins\yuicompressor folgende Datei build.xml ein:

<project name="Compress CSS/JS" default="all" basedir=".">
  <!-- Setup -->
  <property name="SRC_DIR" value="WebContent" description="Source folder" />
  <property name="SRC_CSS_DIR" value="${SRC_DIR}/css" description="CSS source folder" />
  <property name="SRC_JS_DIR" value="${SRC_DIR}/js" description="JavaScript source folder" />
  <property name="DIST_DIR" value="c:/web/apache/htdocs/${PROJECT}" description="Output folder for build targets" />
  <property name="DIST_CSS_DIR" value="${DIST_DIR}/css" description="Output folder for CSS files" />
  <property name="DIST_JS_DIR" value="${DIST_DIR}/js" description="Output folder for JavaScript files" />
  <property name="BUILD_DIR" value="c:/web/eclipse/dropins/yuicompressor-2.4.6/build" description="Files needed to build" />
  <property name="YUI" value="${BUILD_DIR}/yuicompressor-2.4.6.jar" description="YUICompressor" />
 
  <!-- Files names for distribution -->
  <property name="ALL_CSS" value="all.css" />
  <property name="ALL_CSS_MIN" value="all.min.css" />
  <property name="ALL_JS" value="all.js" />
  <property name="ALL_JS_MIN" value="all.min.js" />
  <property name="CSS" value="${DIST_CSS_DIR}/${ALL_CSS}" />
  <property name="CSS_MIN" value="${DIST_CSS_DIR}/${ALL_CSS_MIN}" />
  <property name="JS" value="${DIST_JS_DIR}/${ALL_JS}" />
  <property name="JS_MIN" value="${DIST_JS_DIR}/${ALL_JS_MIN}" />
 
  <!-- Targets -->
  <target name="html" description="Copy HTML files to the output folder">
    <mkdir dir="${DIST_DIR}" />
    <copy todir="${DIST_DIR}">
       <fileset dir="${SRC_DIR}">
         <exclude name="css/*.css" />
         <exclude name="js/*.js" />
       </fileset>
    </copy>
  </target>
 
  <target name="css" depends="html" description="Concatenate CSS source files">
    <echo message="Building ${CSS}" />
    <concat destfile="${CSS}">
      <fileset dir="${SRC_CSS_DIR}" includes="*.css" />
    </concat>
    <echo message="${CSS} built." />
  </target>
 
  <target name="css.min" depends="css" description="Minimize CSS files">
    <echo message="Building ${CSS_MIN}" />
    <apply executable="java" parallel="false" verbose="true" dest="${DIST_CSS_DIR}">
      <fileset dir="${DIST_CSS_DIR}">
        <include name="${ALL_CSS}" />
      </fileset>
      <arg line="-jar" />
      <arg path="${YUI}" />
      <arg value="--charset" />
      <arg value="ANSI" />
      <arg value="-o" />
      <targetfile />
      <mapper type="glob" from="${ALL_CSS}" to="${ALL_CSS_MIN}" />
    </apply>
    <echo message="${CSS_MIN} built." />
  </target>
 
  <target name="js" depends="html" description="Concatenate JavaScript source files">
    <echo message="Building ${JS}" />
    <concat destfile="${JS}">
      <fileset dir="${SRC_JS_DIR}" includes="*.js" />
    </concat>
    <echo message="${JS} built." />
  </target>
 
  <target name="js.min" depends="js" description="Minimize JavaScript files">
    <echo message="Building ${JS_MIN}" />
    <apply executable="java" parallel="false" verbose="true" dest="${DIST_JS_DIR}">
      <fileset dir="${DIST_JS_DIR}">
        <include name="${ALL_JS}" />
      </fileset>
      <arg line="-jar" />
      <arg path="${YUI}" />
      <arg value="--charset" />
      <arg value="ANSI" />
      <arg value="-o" />
      <targetfile />
      <mapper type="glob" from="${ALL_JS}" to="${ALL_JS_MIN}" />
    </apply>
    <echo message="${JS_MIN} built." />
  </target>
 
  <target name="clean">
    <delete dir="${CSS}" />
    <delete dir="${CSS_MIN}" />
    <delete dir="${JS}" />
    <delete dir="${JS_MIN}" />
  </target>
 
  <target name="all" depends="clean, html, css, css.min, js, js.min">
    <echo message="Build complete." />
  </target>
</project>

Quellen

1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
2. Samuel Santos: Combine and minimize JavaScript and CSS files for faster loading
3. YUI Compressor

SVN-Repository-Verweise

• Musterlösung (SVN)