Gulp-component-inline NPM

gulp-component-inline

Gulp Plugin which inlines artTemplate file (or css files) directly in JS by '__inline', and compiles them into JS

Install

npm install gulp-header-license --save-dev

Basic Usage

const gulp = require('gulp');
const component = require('gulp-component-inline');

gulp.task('default', () =>
	gulp.src('src/*.js')
		.pipe(component())
		.pipe(gulp.dest('dist'))
);

The plugin can actively recognize which type of file do you want to compile. So it don't need any extra APIs, just use it simply in you task.

Example

index.js

__inline('../tmpl/index.tmpl');
__inline('../css/index.css');
__inline('../css/index.scss');

index.tmpl

<span class="menu-name">{{menu.title}}</span>

index.css

p {
  margin: 0;
}

index.scss

div {
  text-align: center;

  a {
    color: red;
  }
}

Finally, index.js will compile to what is bellow:

[function($data,$filename
/*``*/) {
var $utils=this,$helpers=$utils.$helpers,$escape=$utils.$escape,menu=$data.menu,$out='';$out+='<span class="menu-name">';
$out+=$escape(menu.title);
$out+='</span>\n';
return new String($out);
}][0];
__inline('p{margin:0}');
__inline('div{text-align:center}div a{color:red}');

Congratulations! You now have mastered the usage of the plugin.