CODEWITHSUNDEEP
javascripthtmlangularjscompilation
user779444
user779444

Reputation: 1395

Compiling my angular custom directive into a single .js file

I worked on an angular directive and I want to create a final distribution file.

My directive has multiple files : controller.js, directive.js, extlib1.js, extlib2.js, main.css and template.html.

I want to create an unminified single js file from the 4 js files and the HTML (represent html as a string in the directive's template).

What I want is the same result as copy/pasting every .js file to a new file, and also converting the html to string. But I want it done automatically

Is there any simple way to do this in visual studio 2015?

Upvotes: 0

Views: 70

Answers (1)

just.another.programmer
just.another.programmer

Reputation: 8815

You can create a custom MSBuild task to do this. You'll want something along the lines of this blog. Make sure to read the HTML file separately so you can write it with the " characters in the directives template.

Here's an example

<ItemGroup>
   <DirectiveFiles Include="controller.js"/>
   <DirectiveFiles Include="directive.js"/>
   <DirectiveFiles Include="extlib1.js"/>
   <DirectiveFiles Include="extlib2.js"/>
   <DirectiveFiles Include="main.css"/>
   <TemplateFiles Include="template.html"/>
</ItemGroup>

<Target Name="ConcatDirective">
   <ReadLinesFromFile File="%(DirectiveFiles.Identity)">
      <Output TaskParameter="DirectiveLines" ItemName="lines"/>
   </ReadLinesFromFile>
   <ReadLinesFromFile File="%(TemplateFiles.Identity)">
      <Output TaskParameter="TemplateLines" ItemName="lines"/>
   </ReadLinesFromFile>
   <WriteLinesToFile File="directive.js" Lines="@(DirectiveLines)" Overwrite="false" />
   <WriteLinesToFile File="directive.js" Lines="@(TemplateLines)" Overwrite="false" />
</Target>

Upvotes: 1

Related Questions