gulp-vue-module

Usage

$ npm install gulp-vue-module --save-dev

var fs = require('fs');
var path = require('path');
var gulp = require('gulp');
var rename = require('gulp-rename');
var VueModule = require('gulp-vue-module');
gulp.task('vue', function() {
 return gulp.src('./vue/**/*.vue')
 .pipe(VueModule({
 debug : true
 }))
 .pipe(rename({extname : ".js"}))
 .pipe(gulp.dest("./dist"));
});
gulp.task('default', ['vue']);

<style lang="scss">
$color:red;
.card {
 backround: $color;
 
 > .head {
 color: $color;
 background: yellow;
 }
}
</style>
<template>
 <div class="app" @click="click">
 <p>{{a}}</p>
 <list-component :msg="message"></list-component>
 </div>
</template>
<script>
 var Vue = require("vue");
 var listComponent = require('component/list');
 module.exports = Vue.extend({
 data : function() {
 return {
 id : 23456,
 message : 'Message'
 }
 },
 methods : {
 click : function() {
 console.log("click()");
 }
 },
 components: {
 'list-component' : listComponent
 },
 template : '__template__'
 });
</script>

define(function(require, exports, module){
 // require.loadCSS() need you implement this function
 require.loadCSS({content : ".card{backround:red}.card>.head{color:red;background:yellow}"});
 var Vue = require("vue/all");
 var listComponent = require('component/list');
 module.exports = Vue.extend({
 data : function() {
 return {
 id : 23456,
 message : 'Message'
 }
 },
 methods : {
 click : function() {
 console.log("click()");
 }
 },
 components: {
 'list-component' : listComponent
 },
 template : '<div class="app" @click="click"><p>{{a}}</p><list-component :msg="message"></list-component></div>'
 };
});

require.loadCSS = function(config) {
 var head = document.getElementsByTagName("head")[0];
 if (config.content) {
 var style = document.createElement('style');
 style.type = 'text/css';
 
 if (style.styleSheet) { // for IE
 style.styleSheet.cssText = config.content;
 } else {
 style.innerHTML = config.content;
 }
 head.appendChild(style);
 callback();
 }
 else if (config.url) {
 var link = document.createElement('link');
 link.href = config.url;
 link.rel = 'stylesheet';
 link.type = 'text/css';
 head.appendChild(link);
 }
};

Options

{
 debug : false, // Debug mode
 amd : false, // AMD style, Define module name and deps
 define : true, // Using define() wrapper the module, false for Node.js (CommonJS style)
 defineName : false, // Define the module name
 indent : ' ', // Indent whitespace
 headerComment : true, // Using <header-comment> Insert the header comments
 templateReplaceTag : '__template__', // vue component template replace tag
 loadCSSMethod : 'require.loadCSS', // define the load css method for require
 externalRequire : false // don't pass require as a parameter
}

Changes

License