How to minify JavaScript files that have changed (and only them) when building (aka duplicate items after adding "ItemGroup" to csproj)

Question

I've added the following code to my .csproj in order to minify the JS files that have changed when building the project:

<Target Name="BeforeBuild">
  <MSBuild Targets="CheckAndMinifyJS" Projects="$(MSBuildProjectFile)" />
</Target>
<ItemGroup>
  <JS Include="$(ProjectDir)\**\*.js" />
</ItemGroup>
<Target Name="CheckAndMinifyJS" Inputs="@(JS)" Outputs="@(JS->'$(ProjectDir)%(RecursiveDir)%(Filename).min.js')">
  <AjaxMin JsSourceFiles="@(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js" />
</Target>
<UsingTask TaskName="AjaxMin" AssemblyFile="..\..\ThirdParty\AjaxMinTask.dll" />

This works great, but it has a side effect: when you look at the project in Visual Studio (2015), all the JS files appear duplicated (same path, but different build action):

I would like to avoid having the item with "JS" build action appearing in the project. How can I do that?

Please note that the several developers are working with the project, so any proposed solution should be contained within the .csproj or the solution (eg: it is not acceptable to ask all developers to modify their registry to change the default build action for JS files).

Have you tried giving the Item JS a different name? Maybe 'JS is 'reserved' by VS.. — stijn
– stijn, Commented Aug 12, 2015 at 18:24
@stijn yes I did try that... Whatever name I put, I get my files to appear in the project with a Build Action of the same name — Gyum Fox
– Gyum Fox, Commented Aug 13, 2015 at 7:09
I think my problem is that all my JavaScript files have already been added to the csproj as "Content". Adding a new "JS" item that targets them must be causing them to appear again as "JS". I probably need to be able to change my Inputs and Outputs in the "CheckAndMinifyJS" target so that I don't have to use that "JS" item. — Gyum Fox
– Gyum Fox, Commented Aug 13, 2015 at 8:40
... or I need to make sure Visual Studio doesn't add my JavaScript files with "Build action = Content" — Gyum Fox
– Gyum Fox, Commented Aug 13, 2015 at 8:45
Could you please describe what is the desired set of build actions you want to see for your *.js items within the VS? JS, Content, or both .. ? I hope I understand correctly that you want to see each *.js file only once within the solution explorer, I just don't know what set of build actions you desire. — Michal Hosala
– Michal Hosala, Commented Sep 4, 2015 at 10:14

weir · Accepted Answer · 2017-01-12 17:57:35Z

1

To hide your ItemGroup from Visual Studio, move it into an intermediate Target. In addition to that change, the following code filters the existing Content items rather than recursing the file system again. This ensures you don't pick up extraneous .js files (for example intermediate output files in obj\, or .min.js files generated by your script but not explicitly added to the project).

  <Target Name="BeforeBuild">
    <MSBuild Targets="CheckAndMinifyJS" Projects="$(MSBuildProjectFile)" />
  </Target>
  <Target Name="GetJSItems" BeforeTargets="CheckAndMinifyJS">
    <ItemGroup>
      <JS Include="@(Content)" Condition=" '%(Extension)' == '.js' " />
    </ItemGroup>
  </Target>
  <Target Name="CheckAndMinifyJS" Inputs="@(JS)" Outputs="@(JS->'$(ProjectDir)%(RecursiveDir)%(Filename).min.js')">
    <AjaxMin JsSourceFiles="@(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js" />
  </Target>
  <UsingTask TaskName="AjaxMin" AssemblyFile="..\..\ThirdParty\AjaxMinTask.dll" />

answered Jan 12, 2017 at 17:57

weir

4,7812 gold badges33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gyum Fox Over a year ago

This seems to work very well! +1. I'll do a few more tests before accepting the answer. Thanks!

Collectives™ on Stack Overflow

How to minify JavaScript files that have changed (and only them) when building (aka duplicate items after adding "ItemGroup" to csproj)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related