gulp-angular-html2js

gulp-angular-html2js

Compiles AngularJS templates to JavaScript.

Install

npm install gulp-angular-html2js --save-dev

Usage

var gulp = require('gulp'),
    html2js = require('gulp-angular-html2js');

gulp.task('default', function () {
    gulp.src("test.html")
        .pipe(html2js({
            moduleName:function(filename,subpath){
                return subpath.replace(/^src\//,'');
            },
            templateUrl:"templates/demo.html",
            rename:function(fileName){
                return fileName+'.js';
            }
        }))
        .pipe(gulp.dest('dest'));
});

Options

• moduleName : define module's name.

  • Type:string|function
  • default:"angular-module"

• templateUrl : define template's name.

  • Type:string|function
  • default:same as moduleName

• rename : rename output file.

  • Type:string|function

Result

Before

alert.html:

<div class="alert alert-success" role="alert">
    <button ng-show="closeable" type="button" class="close" ng-click="close({$event: $event})">
        <span aria-hidden="true">&times;</span>
        <span class="sr-only">Close</span>
    </button>
    <div ng-transclude></div>
</div>

Execute

gulp.task('default', function () {
    gulp.src("src/**/*.html")
        .pipe(html2js({
            moduleName:function(filename,subpath){
                return subpath.replace(/^src\//,'');
            },
            templateUrl: function (filename) {
                return 'templates/'+filename;
            },
            rename:function(fileName){
                return fileName+'.js';
            }
        }))
        .pipe(gulp.dest('dest'));
});

After

alert.html.js:
angular.module("alert/templates/alert.html",[]).run(["$templateCache",function($templateCache){
    $templateCache.put("templates/alert.html",
    "<div class=\"alert alert-success\" role=\"alert\">"+
    "    <button ng-show=\"closeable\" type=\"button\" class=\"close\" ng-click=\"close({$event: $event})\">"+
    "        <span aria-hidden=\"true\">&times;</span>"+
    "        <span class=\"sr-only\">Close</span>"+
    "    </button>"+
    "    <div ng-transclude></div>"+
    "</div>");
}]);

License

MIT