One of the items I have been looking at recently is managing and minifying Javascript and CSS files. One of the good practices for web developers is to create websites that load quickly and have minimal server calls. Using tools to combine CSS or Javascript and minify them is an essential best practice. I'm currently working on a website developed in .NET where the files have not been concatenated, and each page is loading more than a dozen Javascript files.
In the past, I've used YUI Compressor to concatenate and minify my files. (The latest version can be downloaded here: http://developer.yahoo.com/yui/compressor/.) I decided to see if there was a way that this could be used in .NET automatically at build time. I came across the following article and decided to test it myself: http://www.codeproject.com/Articles/141931/Combine-Multiple-CSS-Files-into-One-File-and-Minif.
These changes required editing the configuration (config) files for the project, and I've outlined some steps below. You''ll need to ensure that you download YUI Compressor from the above link and download NantContrib, if you have not already. This was already set up for me and used, but we will need to ensure that we point to the NAnt.Contrib.Tasks.dll file. (Download NAntContrib hereL http://nantcontrib.sourceforge.net/.)
- 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.
However, apparently Visual Studio .NET comes with its own built-in tools for minifying and concatenating Javascript and CSS files now, but I have yet to try this.
Leave a comment