May 2012 Archives

• Ensure that the variables are set for buildDirectory, etc. I added the nantContrib.Path, <property name="nantContrib.Path" value="${path::get-full-path(nant::get-base-directory()+'../bin/NAnt.Contrib.Tasks.dll')}" />

• Point to the JAR file for YUI Compressor, <property name="YUI" value="C:\yuicompressor-2.4.7\build\yuicompressor-2.4.7.jar"/>
• Set the property name to point to the location of the CSS files and Javascript files. On build, all Javascript files are bundled into one directory in 'wwwroot', called 'scripts', and the CSS is in 'styles'. 
  <property name="CssFileLocation"  value="styles"/> 
  <property name ="JsFileLocation" value="scripts"/>
• The following code concatenates the files in the directory and names the file 'style.css'. However, you can specify which files to exclude, if you desire. In the example below, I excluded print.css.

    <loadtasks assembly="${nantContrib.Path}" />

    <echo message="Building ${buildDir}\wwwroot\${CssFileLocation}\*.css" />

    <concat destfile="${buildDir}\wwwroot\${CssFileLocation}\style.css" append="true">

      <fileset>

        <include name="${buildDir}\wwwroot\${CssFileLocation}\*.css" />

        <exclude name ="${buildDir}\wwwroot\${CssFileLocation}\print.css"/>

      </fileset>

    </concat>

    <echo message="${buildDir}\wwwroot\${CssFileLocation}\style.css built." />

    <echo message="delete other files except style.css" />

    <delete>

      <fileset>

        <include name="${buildDir}\wwwroot\${CssFileLocation}\*.css"/>

        <exclude name="${buildDir}\wwwroot\${CssFileLocation}\style.css"/>

        <exclude name ="${buildDir}\wwwroot\${CssFileLocation}\print.css"/>

      </fileset>

    </delete>

    <echo message="delete other files except style.css is done" />

  </target>

• The next step is to minify the CSS style.css file and save it as style.min.css. This will minify the files in sub-directory too, and print.css (excluded above) will also be minified.

    <foreach item="File" property="filename">

      <in>

        <items>

          <include name="${buildDir}\wwwroot\${CssFileLocation}\**\*.css"/>

        </items>

      </in>

      <do>

        <echo message="${filename}" />

        <exec program="java">

          <arg value="-jar" />

          <arg value="${YUI}" />

          <arg value="-o" />

          <arg value="${filename}.min" />

          <arg value="${filename}" />

        </exec>

      </do>

    </foreach>

  </target>

• The same method will need to be used for Javascript files, which may require a little more thought on the organisation of the code within the files.
• For the way in which the build script was written, I added the 'css' and 'css.minify' commands (target name) to the <target name="build" depends="css, css.minify"> tag, and the same would be done with the Javascript-specific code.

• The final step would be to update your HTML to point to the correct CSS/JS files, and to load the Javascript at the bottom on the HTML page. The website I used as a guide mentions automatically replacing the file names, but I'm dubious about that.