gulp-inject-html
v1.0.5
Published
inject the content of a html dependence into AMD module as a variable
Downloads
4
Maintainers
Readme
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>';
...
options
templates
Type: string. Refer to Usage section.
baseUrl
Type: string. Refer refer to Usage section.
pathBuilder
Type: string or array. Refer to Usage section.
htmlClean
Type: object
gulp-inject-html use htmlclean to handle your html template. htmlClean
is the options for htmlclean.
Note
- DO NOT put code before define([],function(){}) call
- your html template file MUST has the same name as your module's