Question

I have a Pre-build event on a web project that minifies and concatenates javascript files using node. This creates a folder called BuiltScripts in the scripts folder that is a duplicate of the scripts folder except the files are minified. When I am doing a deploy I want to publish the scripts folder including the BuiltScripts folder within it. To achieve this I have added the BuiltScripts folder to the project. This is not an ideal solution as:

1. I have to have the BuiltScripts folder checked out in order to build as the files in it are read only as the solution is under source control. This creates hassles when checking in as I have so many files checked out.
2. When I add a new file to the project I have to make sure I remember to add it to the BuiltScripts folder or the built version of the file will not be deployed.
3. My build will fail on the build server as the files in the BuiltScripts folder are read only there as well.
4. Having two copies of a file with the same name is an issue when searching for files and doing text based searches.

I would like to have the build server build and minifiy the javascript files as a pre build step but I do not want the BuiltScripts folder added to the project. However when the build server packages the project at the end I want it to copy the BuiltScripts folder with the output of the build process. How can I achieve this?

Answer 1

Instead of using the pre-build event of the project properties (which I think is what you mean), override the BeforeBuild target in the .csproj/.vbproj file.

<Project ...>
  ...
  <Target Name="BeforeBuild">
    <!-- Create the 'BuildScripts' directory. -->
    <!-- The $(IntermediateOutputPath) reference the 'obj' folder, which I like to -->
    <!-- use for these kinds of things. -->
    <MakeDir Directories="$(IntermediateOutputPath)BuiltScripts">
      <Output PropertyName="BuildScriptsPath" TaskParameter="DirectoriesCreated" />
    </MakeDir>
    <!-- Execute the javascript minifier. -->
    <Exec Command="..." />
    <!-- Create an item group for the minified scripts so we manipulate the target path. -->
    <CreateItem Include="$(BuildScriptsPath)\*.js">
      <Output ItemName="BuiltScripts" TaskParameter="Include" />
      <Output ItemName="FileWrites" TaskParameter="Include" />
    </CreateItem>
    <!-- Add the minified scripts to the Content item group, -->
    <!-- which the deployment MSBuild inspects for files to deploy. -->
    <CreateItem Include="@(BuiltScripts)"
      AdditionalMetadata="TargetPath=scripts\%(Filename)%(Extension)">
      <Output ItemName="ContentWithTargetPath" TaskParameter="Include" />
    </CreateItem>
  </Target>
  ...
</Project>

You may have to play with the shape of the Content item group that is the output of the CreateItem task if the files don’t get deployed to the right directory. Note that I used an item transform to make the target path scripts\YourScript.js.

Also note the first CreateItem task stuffs the output into an item group called ‘FileWrites.’ I discovered that the Clean target inspects that item group to know what files to delete.

Place that XML into your project file after the <Import> elements and you should be good to go. No checking-into source control required and even your build server will be happy.