Gulp-inject-html NPM

gulp-inject-html

Assuming your AMD module depends on a html file(load with textjs), and you want pack the module and the html together, then this is what are you looking for!

gulp-inject-html will go through your code and figure out the html dependences, and then inject the html content into your module as a variable!

for more information, see Usage section below.

Install

$ npm install --save-dev gulp-inject-html

Usage

prepare your files

templates
- index.html
views
- index.js
data-main.js

prepare your code

if you use a path-builder just as i do as below, then you need to provide "templates" which is the folder that holds your html templates for gulp-inject-html. gulp-inject-html will lookup respective html file and inject it into your module.

And if your path-builder is different from mine, you may need to tell gulp-inject-html what it looks like via "pathBuilder"(array for muti, or string for single one).

/***
 * js in data-main js
 **/
window._buildTextPath = function( fileName ){
	return "text!../templates/" + fileName );
}

/***
 * views/index.js
 **/
define(['base', _buildTextPath( 'index.html' ), 'vote'], function( Baseview, Html, Vote ){
	"use strict";
	......
})

or you just use your "text" plugin without any decoration like the following, then you need provide "baseUrl" (an option for requirejs) for gulp-inject-html, gulp-inject-html will lookup respective html file relatively.

define(['base', 'text!../templates/index.html', 'vote'], function( Baseview, Html, Vote ){
	"use strict";
	......
})

/***
 * template/index.html
 **/
<div class="index-fixedbtn" v-attr="event-url:signuped?'mywork':'signup'"></div>
<div class="index-t ac">
    <button class="btn redbtn" event-src="voteTa">给她投票</button><br>
    <i></i>
</div>

prepare your gulp task

/***
 * in gulpfile.js
 **/
var injecthtml  = require('gulp-inject-html');
...

gulp.task( 'build', function(){
	return gulp.src( './views/*.js' ) )
	    .pipe( injecthtml({ 
	    	templates: 'templates',
	    	baseUrl: 'views',
	    	pathBuilder: [ '_buildTextPath', '_buildTextPath2' ]
	    })) 
	    .pipe( gulp.dest( './buld/views' ));
})


// templates: the folder that hold your html templates. 
// gulp-inject-html will read the html file that has the same name as your module's.

build result

/***
 * build/views/index.js
 **/
 
define(['base', 'vote' ], function (Baseview, Vote) {
    'use strict';
    var Html = '<div class="index-fixedbtn" v-attr="event-url:signuped?\'mywork\':\'signup\'"></div>\r\n<div class="index-t ac">\r\n    <button class="btn redbtn" event-src="voteTa">给她投票</button><br>\r\n    <i></i>\r\n</div>';
    
    ...