MSBuild: How do I create and use a Task to convert Content items at build time?

Question

I have a Silverlight 3 project with something like this:

<ItemGroup>
  <Content Include="Content\image1.png">
  </Content>
</ItemGroup>

Basically I've added a PNG file to my project and set its build action to "Content". This works nicely.

Now what I'd like to do is be able to add images in a different format to my project, and have them converted to PNG at build time - so that the end result is as if I had added a PNG image to the project (as Content) in the first place.

In other words - I want the image to appear, in PNG format, in my XAP package.

Ideally I would like to do this in such a way that it will work with Visual Web Developer 2008 Express (so I can add image files to my project by dragging them into the IDE and maybe changing their build action), and without making any system-wide changes.

The specific format I want to convert is XCF - I already have the .NET code to do the conversion to PNG. I am assuming that I must create a MSBuild Task.

I don't really have much MSBuild experience, and I'd like to know how to put such a thing together.

---

Based on my rough understanding of how MSBuild works, I think that I need to know:

• How to create a collection of items by (re)moving them from the @(Content) (or some other) collection, based on their file extension?
  • OR: Create a custom Build Action I can use in Visual Web Developer 2008 Express
• How to recieve the path of input items in a Task?
• Where (.NET or MSBuild?) and How to specify the location of output files generated by a Task?
• How to ensure that a file is rebuilt if its input file changes?
• Where (probably BeforeBuild?) and How to reinject the converted items into @(Content)? (Or should I use some other collection?)
  • OR: Some other way of getting them into the XAP?

And if this seems like a reasonable way to do things or if I've missed anything?

Answer 1

Instead of creating a MSBuild task you can also create a Custom tool and specify this in Custom Tool in properties of your image file.

"a custom tool will transform a file at design time and will place the output of the transformation into another file"

e.g. DataSet. it has its own transformation tool through which we get a class to use in our application.

the advantage of this approach is you can use the generated file at design time as well.

as sample implementation can be found at http://www.drewnoakes.com/snippets/WritingACustomCodeGeneratorToolForVisualStudio/

Answer 2

I believe you want something like this:

<ItemGroup>
  <JPGContent Include="foo.jpg" />
</ItemGroup>
<Target Name="BeforeBuild" 
        Inputs="@(JPGContent)" Outputs="%(JPGContent.Filename).png">
  <!-- replace this with call to jpg->png converter -->
  <Exec Command="copy %22%(JPGContent.FullPath)%22 %(JPGContent.Filename).png" />
  <ItemGroup>
    <Content Include="%(JPGContent.Filename).png" />
  </ItemGroup>
</Target>
<Target Name="AfterBuild">
  <!-- just demoing that 'Content' now has right value -->
  <Warning Text ="Content=@(Content)" />
</Target>

where you specify a new JPGContent BuildAction that it converts.

(Possibly see also http://msdn.microsoft.com/en-us/library/ms164313.aspx and note that %22 is just a way to embed a quotation mark in an attribute.)

Answer 3

You have asked specific sub-questions with a view to achieving your overall goal, I presume you want to learn about MSBuild, rather than get a rote answer to your overall task (which is what you are gonna get from many other people due to your bounty), so I will answer your individual questions and then attempt to roll them all up into a solution.

So let's say you want to convert all .jpg files to .png.

Create a sub-list from the content item list based on extension:

<ItemGroup>
    <Sublist Include="@(Content)" Condition=" '%(Extension)' == '.jpg' " />
</ItemGroup>

Receive the path of the item in a task.

Two ways - depends on the input that your task can accept. This way is like a "foreach" over each item in Sublist, and I would tend to use it with an Exec task:

<Exec Command="convert.exe /Input:%(Sublist.FullPath)" />

Specifying an output path also depends on the .exe or the task that you are and what an output path means to a particular task:

is it a directory, or just a filename with a different extension. But I'll assume you want to output files with the same name, but a different extension:

<Exec Command="convert.exe &quot;%(Sublist.FullPath)&quot;  &quot;%(Sublist.RootDir)%(Sublist.Directory)%(Sublist.Filename).png&quot;" />    

How to rebuild the png if the jpg changes (or is cleaned).

Well, this is using the Inputs and Outputs attribute of the containing target element where our convert command is executed. Inputs specifies what the source files are, and outputs specifies what the target will produce. MSBuild then compares the datetime of the Inputs with the datetime of the output and if they are out of date, then the outputs get rebuilt

<Target Name="ConvertJpg"  
        Inputs="@(Content)"
        Outputs="@(Content -> '%(RootDir)%(Directory)%(Filename).png' )"
        Condition=" '%(Extension)' == '.jpg' "

• Inputs says that we want to use the "Content" itemgroup
• The Condition attribute ensures that we are only working with Content items that end in the .jpg extension
• The Outputs attribute says that of the inputs that we are working with, we'll be generating files that have similar path and filename, but end with the .png extension

Lastly, you correctly have spotted that you need to re-inject the generated .png files back into the @Content item group - well, that's easy, you just Include them into the Content item. Recall that Sublist contains .jpg files - we want those files but with a .png ending. We also do NOT want the .jpg files in the Content item group once a png has been generated

<Content Remove="@(Sublist)" />
<Content Include="@(Sublist -> '%(RootDir)%(Directory)%(Filename).png' )" />

So summing up, your target would looks something like this I believe:

<Target Name="ConvertJpg"  
        Inputs="@(Content)"
        Outputs="@(Content -> '%(RootDir)%(Directory)%(Filename).png' )"
        Condition=" '%(Extension)' == '.jpg' "
    <ItemGroup>
        <Sublist Include="@(Content)" Condition=" '%(Extension)' == '.jpg' " />
    </ItemGroup>

    <Exec Command="convert.exe /Input:%(Sublist.FullPath) Output=%(Sublist.RootDir)%(Sublist.Directory)%(Sublist.Filename).png" />

    <Content Remove="@(Sublist)" />
    <Content Include="@(Sublist -> '%(RootDir)%(Directory)%(Filename).png' )" />
</Target>

By the way, ImageMagik has a command line tool that will convert jpg to png...