├── .editorconfig ├── .gitattributes ├── .gitignore ├── .jshintrc ├── .travis.yml ├── LICENSE ├── index.js ├── package.json ├── readme.md └── tests ├── fixtures ├── angular-basic.html ├── angular-complex.html ├── angular-custom.html ├── angular-templates.html └── noangular.html └── test.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | [*] 7 | 8 | indent_style = space 9 | end_of_line = lf 10 | charset = utf-8 11 | trim_trailing_whitespace = true 12 | insert_final_newline = true 13 | 14 | [*.{js,json,html,jade,md}] 15 | indent_size = 4 16 | 17 | [*.js] 18 | jslint_happy = true 19 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "esnext": true, 4 | "bitwise": true, 5 | "camelcase": true, 6 | "curly": true, 7 | "eqeqeq": true, 8 | "immed": true, 9 | "indent": 4, 10 | "latedef": true, 11 | "newcap": true, 12 | "noarg": true, 13 | "quotmark": "single", 14 | "regexp": true, 15 | "undef": true, 16 | "unused": true, 17 | "strict": true, 18 | "trailing": true, 19 | "smarttabs": true, 20 | "globals": { 21 | "describe": false, 22 | "it": false, 23 | "before": false, 24 | "beforeEach": false, 25 | "after": false, 26 | "afterEach": false 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - '0.10' 5 | - '0.12' 6 | - '0.13' 7 | - 'iojs' 8 | matrix: 9 | fast_finish: true 10 | allow_failures: 11 | - node_js: '0.13' 12 | notifications: 13 | email: 14 | on_success: never 15 | on_failure: always 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) Gilad Peleg (http://giladpeleg.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var gutil = require('gulp-util'); 3 | var through = require('through2'); 4 | var pluginName = 'gulp-angular-htmlify'; 5 | var pluginError = gutil.PluginError; 6 | 7 | module.exports = function(params) { 8 | params = params || {}; 9 | var verbose = Boolean(params.verbose); 10 | var htmlify = require('angular-html5')({ 11 | customPrefixes: params.customPrefixes 12 | }); 13 | 14 | return through.obj(function(file, enc, cb) { 15 | if (file.isNull()) { 16 | cb(null, file); 17 | return; 18 | } 19 | 20 | if (file.isStream()) { 21 | cb(new pluginError(pluginName, 'Streaming not supported')); 22 | return; 23 | } 24 | 25 | var data = file.contents.toString('utf8'); 26 | //if ng-directives exist 27 | if (htmlify.test(data)) { 28 | //replace contents and assign them back to stream contents 29 | file.contents = new Buffer(htmlify.replace(data)); 30 | if (verbose) { 31 | //get filename or unknown 32 | var filename = gutil.colors.magenta(file.path || 'unknown'); 33 | gutil.log(gutil.colors.blue(pluginName), 'found and replaced ng-directives in ' + filename); 34 | } 35 | } 36 | 37 | //push back file to stream 38 | cb(null, file); 39 | }); 40 | }; 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-angular-htmlify", 3 | "version": "2.3.0", 4 | "description": "Change your ng-attributes to data-ng-attributes for HTML5 validation", 5 | "repository": "pgilad/gulp-angular-htmlify", 6 | "license": "MIT", 7 | "author": { 8 | "name": "Gilad Peleg", 9 | "email": "giladp007@gmail.com", 10 | "url": "http://giladpeleg.com" 11 | }, 12 | "main": "index.js", 13 | "files": [ 14 | "index.js" 15 | ], 16 | "engines": { 17 | "node": ">=0.10.0" 18 | }, 19 | "scripts": { 20 | "watchTest": "mocha -R spec -w ./tests/*.js", 21 | "test": "mocha -R spec ./tests/*.js" 22 | }, 23 | "keywords": [ 24 | "gulpplugin", 25 | "gulp", 26 | "angular", 27 | "w3c", 28 | "validator", 29 | "html5", 30 | "data-ng", 31 | "ng" 32 | ], 33 | "dependencies": { 34 | "angular-html5": "^2.5.0", 35 | "gulp-util": "^3.0.4", 36 | "through2": "^0.6.5" 37 | }, 38 | "devDependencies": { 39 | "mocha": "*" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # [gulp](https://github.com/wearefractal/gulp)-angular-htmlify 2 | 3 | > Change your ng-attributes to data-ng-attributes for HTML5 validation using [angular-html5](https://github.com/pgilad/angular-html5) 4 | 5 | [![NPM Version](http://img.shields.io/npm/v/gulp-angular-htmlify.svg?style=flat)](https://npmjs.org/package/gulp-angular-htmlify) 6 | [![NPM Downloads](http://img.shields.io/npm/dm/gulp-angular-htmlify.svg?style=flat)](https://npmjs.org/package/gulp-angular-htmlify) 7 | [![Build Status](http://img.shields.io/travis/pgilad/gulp-angular-htmlify.svg?style=flat)](https://travis-ci.org/pgilad/gulp-angular-htmlify) 8 | 9 | *Issues with the output should be reported on the angular-html5 [issue tracker](https://github.com/pgilad/angular-html5/issues).* 10 | 11 | ## Install 12 | 13 | Install with [npm](https://npmjs.org/package/gulp-angular-htmlify) 14 | 15 | ```sh 16 | npm install --save-dev gulp-angular-htmlify 17 | ``` 18 | 19 | ## Usage 20 | 21 | ```js 22 | var gulp = require('gulp'); 23 | var htmlify = require('gulp-angular-htmlify'); 24 | 25 | //simple usage 26 | gulp.task('htmlify', function() { 27 | gulp.src('public/**/*.html') 28 | .pipe(htmlify()) 29 | .pipe(gulp.dest('build/')); 30 | }); 31 | 32 | //using jade as a pre-processer 33 | gulp.task('htmlify', function() { 34 | gulp.src('partials/**/*.jade') 35 | .pipe(jade()) 36 | .pipe(htmlify()) 37 | .pipe(gulp.dest('build/')); 38 | }); 39 | 40 | //Also transforming ui-attributes to data-ui-attributes 41 | gulp.task('htmlify', function() { 42 | gulp.src('public/**/*.html') 43 | .pipe(htmlify({ 44 | customPrefixes: ['ui-'] 45 | })) 46 | .pipe(gulp.dest('build/')); 47 | }); 48 | ``` 49 | 50 | ## Options 51 | 52 | See the `angular-html5` [options](https://github.com/pgilad/angular-html5#api) 53 | 54 | ### Additional Options 55 | 56 | #### verbose 57 | 58 | Type: `Boolean` 59 | 60 | Default: `false` 61 | 62 | Whether to log files that had ng-directives detected and replaced. (Useful for debugging). 63 | 64 | Example usage: 65 | ```js 66 | //... 67 | .pipe(htmlify({ 68 | verbose: true 69 | })) 70 | // --> [gulp] Found and replaced ng-directives in index.html 71 | //... 72 | ``` 73 | 74 | ## License 75 | 76 | MIT @[Gilad Peleg](http://giladpeleg.com) 77 | -------------------------------------------------------------------------------- /tests/fixtures/angular-basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | fixture 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /tests/fixtures/angular-complex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | fixture 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /tests/fixtures/angular-custom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | fixture 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /tests/fixtures/angular-templates.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | fixture 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /tests/fixtures/noangular.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | fixture 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /tests/test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var assert = require('assert'); 3 | var fs = require('fs'); 4 | var gutil = require('gulp-util'); 5 | var htmlify = require('../index'); 6 | 7 | it('should handle a no angular file', function (cb) { 8 | var stream = htmlify(); 9 | var filename = './tests/fixtures/noangular.html'; 10 | 11 | stream.on('data', function (file) { 12 | //make sure file was not changed 13 | assert.equal(file.contents.toString(), testFile.toString()); 14 | }); 15 | 16 | stream.on('end', cb); 17 | 18 | var testFile = fs.readFileSync(filename); 19 | 20 | stream.write(new gutil.File({ 21 | contents: new Buffer(testFile.toString()) 22 | })); 23 | 24 | stream.end(); 25 | }); 26 | 27 | it('should handle a basic angular app', function (cb) { 28 | var stream = htmlify(); 29 | var filename = './tests/fixtures/angular-basic.html'; 30 | 31 | stream.on('data', function (file) { 32 | //make sure ng-app turned into data-ng-app 33 | var contents = file.contents.toString('utf8'); 34 | //test that data-ng appears 35 | assert(/\s+data-ng-app/.test(contents)); 36 | //test that ng-app doesn't appear 37 | assert(!/\s+ng-app/.test(contents)); 38 | }); 39 | 40 | stream.on('end', cb); 41 | 42 | var testFile = fs.readFileSync(filename); 43 | 44 | stream.write(new gutil.File({ 45 | contents: new Buffer(testFile.toString()) 46 | })); 47 | 48 | stream.end(); 49 | }); 50 | 51 | it('should handle a complex angular app', function (cb) { 52 | var stream = htmlify(); 53 | var filename = './tests/fixtures/angular-complex.html'; 54 | 55 | stream.on('data', function (file) { 56 | //make sure ng-app turned into data-ng-app 57 | var contents = file.contents.toString('utf8'); 58 | //test that data-ng appears 59 | assert(/\s+data-ng-app/.test(contents)); 60 | //test that ng-app doesn't appear 61 | assert(!/\s+ng-app/.test(contents)); 62 | //test that ng-controller is transormed 63 | assert(/\s+data-ng-controller/.test(contents)); 64 | //test that ng-controller doesn't appear 65 | assert(!/\s+ng-controller/.test(contents)); 66 | //test that ng-if is transormed 67 | assert(/\s+data-ng-if/.test(contents)); 68 | //test that ng-if doesn't appear 69 | assert(!/\s+ng-if/.test(contents)); 70 | //handle a directive 71 | assert(/ directive 75 | assert(/