gulp-angular-htmlify
Change your ng-attributes to data-ng-attributes for HTML5 validation
Ever tried to run an Angular HTML page into w3c validator? Yeah it's a mess.
The solution everyone recommends is to add data to all your ng directives.
Now with gulp this can be easily made part of your build flow, similar to how
ng-min is to creating minifiable Angular syntax.
Turn this:
<html ng-app="myApp">
...
<body ng-controller="MainCtrl">
</body>
</html>
Into this:
<html data-ng-app="myApp">
...
<body data-ng-controller="MainCtrl">
</body>
</html>
gulp-angular-htmlify looks for ng- directives by default and can handle the following cases:
<!-- attribute -->
<ANY ng-directive>
<!-- regular element -->
<ng-directive></ng-directive>
<!-- self closing element -->
<ng-directive />
<!-- custom directive prefix -->
<ui-router></ui-router>
<!-- your name prefix -->
<gilad-cool-loader></gilad-cool-loader>
You can add additional prefixes using the option customPrefixes.
This plugin plays nice with type="text/ng-template" and won't break it.
Install
Install with npm
npm install --save-dev gulp-angular-htmlify
Example
var gulp = require('gulp');
var htmlify = require('gulp-angular-htmlify');
gulp.task('htmlify', function() {
gulp.src('public/**/*.html')
.pipe(htmlify())
.pipe(gulp.dest('build/'));
});
API
htmlify(params)
params is an object that contains the following settings:
customPrefixes
Type: Array
An array to optionally add custom prefixes to the list of converted directives.
For example: ['ui-', 'gijo-']
By default only ng- prefixes are are handled. Any items you add here will be handled as well.
Note: for this to work - you will need to make sure your directives can load with a data- prefix.
Defaults to [ ]
verbose
Type: Boolean
Whether to log files that had ng-directives detected and replaced. (Useful for debugging).
Defaults to false.
Example usage:
//...
.pipe(htmlify({
verbose:true,
customPrefixes: ['ui-']
}))
// --> [gulp] Found and replaced ng-directives in index.html
//...
License
MIT ©2014 Gilad Peleg