Gulp-angular-embed NPM

gulp-angular-embed

This package is a Gulpjs plugin to embed html and css references in any Angualr >4.x component. If there are templateUrl: './header.template.html' or styleUrls: './header.style.css' links, gulp-angular-embed will replace this links by the links content.

Install

 $ npm install --save-dev gulp-angular-embed

How to use

This in only an example. Its possible to combine gulp-angular-embed with any other gulpjs pluigns.

 var gulp = require('gulp');
 var angularEmbed = require("gulp-angular-embed");
 var uglify = require('gulp-uglify');  // optional, only if you like to minify your code 
 var pump = require('pump');           // optional, only if you use 'gulp-uglify'
  
 gulp.src(["./any/SourceFolder/foo.js"])
  .pipe(angularEmbed())
  .pipe(uglify())                    // optional, for example: embaded and minifyed html and css
  .pipe(gulp.dest("./any/DestinationFolder/"));

Before

Maybe you have a Angularjs component like this. Than gulp-angular-embed will embed the templateurl and styleUrls als inline. Bothe "myComponent.styleA.css" and "myComponent.styleB.css" will be enbed.

  // An angular typescript component
  import { Component } from '@angular/core';

  @Component({
	selector: 'myComponent',
	templateUrl: './myComponent.template.html'
	styleUrls:  ['./myComponent.styleA.css','./myComponent.styleB.css'] 
  })
  export class myComponent {
}

After

gulp-angular-embed embeded the content and now the component looks like this. It also removed any linebreaks and duble whitespaces. Its not allowed to use singel quotation marks inside the html-template or stylesheet files!

 // An compiled angular typescript component
 
 // Normaly some lines of code, but for this example removed

var core_1 = require("@angular/core");
var myComponent = (function () {
   function myComponent() {
   }
   return myComponent;
}());
myComponent = __decorate([
   core_1.Component({
       selector: 'header',
       template:'<div class="col col-md-auto"><div class="input-group"><input type="text" class="form-control" placeholder="Search for..."><span class="input-group-btn"><button class="btn btn-secondary" type="button">Search</button></span></div></div><div class="col"></div><div class="col col-md-auto"><!-- Secondary, outline button --><button type="button" class="btn btn-secondary"><i class="fa fa-comments"aria-hidden="true"></i></button><!-- Secondary, outline button --><button type="button" class="btn btn-secondary"><i class="fa fa-bell-o" aria-hidden="true"></i></button><!-- Secondary, outline button --><button type="button" class="btn btn-secondary"><i class="fa fa-language" aria-hidden="true"></i></button><span>Matthias Just</span><i class="fa fa-sort-desc" aria-hidden="true"></i></div>',
       styles:['.gc-header span{font-weight:700;color:#808080}#body{bla:22}']
    })
 ], myComponent);
 exports.myComponent = myComponent;