gulp-simple-vue-templates.js

'use strict';

var through = require('through2');
var PluginError = require('gulp-util').PluginError;

var reTemplate = /<template>([\s\S]+)<\/template>/i;
var reScript = /<script>([\s\S]+)<\/script>/i;
var reNewLine = /[\n\r\t]+/g;
var reComponent = /Vue\.component\([\s]*[\'\"\`]{1}[\w-]+[\'\"\`]{1},[\s]*\{/;
var reInstance = /new[\s]+Vue[\s]*\([\s\n\r]*\{/;

module.exports = function() {
  return through.obj(function(file, encoding, callback) {
		if(file.isNull())
      return callback(null, file);

		if(file.isStream())
			this.emit('error', new PluginError(PLUGIN_NAME, 'Streams not supported!'));

		//if it's a .vue file
		if(file.path.length <= 4 || file.path.substring(file.path.length - 4, file.path.length) !== '.vue')
			return callback(null, file);

		var strFileContent = String(file.contents);

		//dealing with a template tag
		var templateContent = reTemplate.exec(strFileContent);

		if(templateContent.length < 2) //if there is no template inside the file
			return callback(null, file);

		templateContent = templateContent[1].replace(reNewLine, '');

		//dealing with a script tag
		var scriptContent = reScript.exec(strFileContent);

		if(scriptContent.length < 2) //if there is no script tag inside the file
			return callback(null, file);

		scriptContent = scriptContent[1];

		var componentMatch = reComponent.exec(scriptContent);
		if(!componentMatch) { //if there is no component definition
			componentMatch = reInstance.exec(scriptContent);
			if(!componentMatch)
				return callback(null, file);
		}

		scriptContent = scriptContent.replace(
			componentMatch[0],
			componentMatch[0] + '\n\ttemplate: \'' + templateContent + '\',\n'
		);
		console.log(scriptContent);

		//we're fine, return the modified file
		file.contents = new Buffer(scriptContent);

		//change extension to .js
		file.path = file.path.replace(/\.vue$/, '.js');

		console.log(file.path);
		callback(null, file);
  });
};