Gulp Angular Templates

Last updated 2019-05-22SourceLinkgulpangular

This gulp plugin takes angular components with templates defined in separate html files and inlines them into the js component definition. It also minifies the html with html-minifier.

For the following input files:

tab.js

function tabDirective() {
  return {
    templateUrl: "tab.html",
  };
}

tab.html

<ul>
  <li>Tab</li>
</ul>

The plugin would output the following js:

function tabDirective() {
  return {
    templateUrl: "<ul><li>Tab</li></ul>",
  };
}

I built this plugin because I was over optimizing another side project using Angular. Building it served as a nice intro to the gulp plugin ecosystem. There were a lot of well maintained and well tested plugins to emulate (read: copy from).