├── tests
    ├── vue
    │   ├── link-css.vue
    │   ├── template-include.vue
    │   ├── link-sass.vue
    │   ├── link-scss.vue
    │   ├── sass.vue
    │   ├── scss.vue
    │   ├── include.vue
    │   ├── list.vue
    │   ├── exports.vue
    │   └── app.vue
    ├── template
    │   └── test.html
    ├── dist
    │   ├── link-css.js
    │   ├── sass.js
    │   ├── template-include.js
    │   ├── scss.js
    │   ├── link-scss.js
    │   ├── link-sass.js
    │   ├── include.js
    │   ├── list.js
    │   ├── exports.js
    │   └── app.js
    ├── package.json
    ├── scss
    │   └── test.scss
    ├── sass
    │   └── test.sass
    └── Gulpfile.js
├── .npmignore
├── CHANGE.md
├── .gitignore
├── package.json
├── LICENSE
├── README.md
└── index.js


/tests/vue/link-css.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | </template>
3 | 
4 | <style href="./css/test.css"></style>
5 | 
6 | <script>
7 | </script>


--------------------------------------------------------------------------------
/tests/vue/template-include.vue:
--------------------------------------------------------------------------------
1 | <template include="./template/test.html"></template>
2 | 
3 | <script></script>
4 | 
5 | <style></style>


--------------------------------------------------------------------------------
/tests/vue/link-sass.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | </template>
3 | 
4 | <script>
5 | </script>
6 | 
7 | <style lang="sass" href="./sass/test.sass"></style>


--------------------------------------------------------------------------------
/tests/vue/link-scss.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | </template>
3 | 
4 | <style lang="scss" href="./scss/test.scss"></style>
5 | 
6 | <script>
7 | </script>


--------------------------------------------------------------------------------
/tests/template/test.html:
--------------------------------------------------------------------------------
1 | <div class="component" @click="click">
2 |     <p>'NAME': {{name}}</p>
3 |     <test-component :msg="message"></test-component>
4 | </div>


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .*.swp
 2 | ._*
 3 | .DS_Store
 4 | .git
 5 | .hg
 6 | .npmrc
 7 | .lock-wscript
 8 | .svn
 9 | .wafpickle-*
10 | config.gypi
11 | CVS
12 | npm-debug.log
13 | tests
14 | backup


--------------------------------------------------------------------------------
/tests/dist/link-css.js:
--------------------------------------------------------------------------------
1 | define(function(require, exports, module) {
2 |     require.loadCSS({url : "./css/test.css"});
3 | 
4 |     module.exports = {
5 |         template : ''
6 |     };
7 | });


--------------------------------------------------------------------------------
/tests/dist/sass.js:
--------------------------------------------------------------------------------
1 | define(function(require, exports, module) {
2 |     require.loadCSS({content : "body{font:100% Helvetica,sans-serif;color:#333}"});
3 | 
4 |     module.exports = {
5 |         template : ''
6 |     };
7 | });


--------------------------------------------------------------------------------
/tests/dist/template-include.js:
--------------------------------------------------------------------------------
1 | define(function(require, exports, module) {
2 |     module.exports = {
3 |         template : '<div class="component" @click="click"><p>&#39;NAME&#39;: {{name}}</p><test-component :msg="message"></test-component></div>'
4 |     };
5 | });


--------------------------------------------------------------------------------
/tests/vue/sass.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | </template>
 3 | 
 4 | <style lang="sass">
 5 | $font-stack: Helvetica, sans-serif
 6 | $primary-color: #333
 7 | 
 8 | body
 9 |   font: 100% $font-stack
10 |   color: $primary-color
11 | 
12 | </style>
13 | 
14 | <script>
15 | </script>


--------------------------------------------------------------------------------
/tests/dist/scss.js:
--------------------------------------------------------------------------------
1 | define(function(require, exports, module) {
2 |     require.loadCSS({content : ".card{backround:red}.card>.head{color:red;background:yellow}"});
3 | 
4 |     module.exports = {
5 |         template : '<div class="card"><header class="head">Header</header></div>'
6 |     };
7 | });


--------------------------------------------------------------------------------
/CHANGE.md:
--------------------------------------------------------------------------------
 1 | ## v0.1.x
 2 | 
 3 | ### v0.1.3
 4 | 
 5 | - Added: `externalRequire` option for `define()` parameters use Require.js config modules.
 6 | 
 7 | ### v0.1.2
 8 | 
 9 | - fixed `<style>` tag bug;
10 | 
11 | ### v0.1.1
12 | 
13 | - fixed style `console.log()`;
14 | 
15 | ### v0.1.0
16 | 
17 | Release v0.1.0


--------------------------------------------------------------------------------
/tests/dist/link-scss.js:
--------------------------------------------------------------------------------
1 | define(function(require, exports, module) {
2 |     require.loadCSS({content : "body{font:100% Helvetica,sans-serif;color:#333}nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}"});
3 | 
4 |     module.exports = {
5 |         template : ''
6 |     };
7 | });


--------------------------------------------------------------------------------
/tests/vue/scss.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="card">
 3 |         <header class="head">Header</header>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <style lang="scss">
 8 | $color:red;
 9 | 
10 | .card {
11 |     backround: $color;
12 |     
13 |     > .head {
14 |         color: $color;
15 |         background: yellow;
16 |     }
17 | }
18 | </style>
19 | 
20 | <script>
21 | </script>


--------------------------------------------------------------------------------
/tests/dist/link-sass.js:
--------------------------------------------------------------------------------
1 | define(function(require, exports, module) {
2 |     require.loadCSS({content : "html,body,ul,ol{margin:0;padding:0}body{font:100% Helvetica,sans-serif;color:#333}nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}"});
3 | 
4 |     module.exports = {
5 |         template : ''
6 |     };
7 | });


--------------------------------------------------------------------------------
/tests/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gulp-vue-module-tests",
 3 |   "version": "0.1.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "Pandao",
10 |   "license": "MIT",
11 |   "devDependencies": {
12 |     "gulp": "^3.9.1",
13 |     "gulp-rename": "^1.2.2"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/tests/scss/test.scss:
--------------------------------------------------------------------------------
 1 | $font-stack:    Helvetica, sans-serif;
 2 | $primary-color: #333;
 3 | 
 4 | body {
 5 |   font: 100% $font-stack;
 6 |   color: $primary-color;
 7 | }
 8 | 
 9 | nav {
10 |   ul {
11 |     margin: 0;
12 |     padding: 0;
13 |     list-style: none;
14 |   }
15 | 
16 |   li { display: inline-block; }
17 | 
18 |   a {
19 |     display: block;
20 |     padding: 6px 12px;
21 |     text-decoration: none;
22 |   }
23 | }


--------------------------------------------------------------------------------
/tests/dist/include.js:
--------------------------------------------------------------------------------
 1 | define(function(require, exports, module) {
 2 |     var a   = require("a");
 3 |     var Vue = require("vue");
 4 |     module.exports = Vue.component("xxx", {,
 5 |         template : '#include "./tpl/test.html"',
 6 |         data : function() {
 7 |             return {
 8 |                 a : 23456
 9 |             }
10 |         },
11 |         props : ["msg"],
12 |         components: {
13 |             aaa : a
14 |         }
15 |     });
16 | });


--------------------------------------------------------------------------------
/tests/sass/test.sass:
--------------------------------------------------------------------------------
 1 | html,
 2 | body,
 3 | ul,
 4 | ol
 5 |   margin:  0
 6 |   padding: 0
 7 | 
 8 | 
 9 | $font-stack:    Helvetica, sans-serif
10 | $primary-color: #333
11 | 
12 | body
13 |   font: 100% $font-stack
14 |   color: $primary-color
15 | 
16 | nav
17 |   ul
18 |     margin: 0
19 |     padding: 0
20 |     list-style: none
21 | 
22 |   li
23 |     display: inline-block
24 | 
25 |   a
26 |     display: block
27 |     padding: 6px 12px
28 |     text-decoration: none
29 | 


--------------------------------------------------------------------------------
/tests/vue/include.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     #include "./tpl/test.html"
 3 | </template>
 4 | 
 5 | <script>
 6 |     var a   = require("a");
 7 |     var Vue = require("vue");
 8 | 
 9 |     module.exports = Vue.component("xxx", {,
10 |         template : '__template__',
11 |         data : function() {
12 |             return {
13 |                 a : 23456
14 |             }
15 |         },
16 |         props : ["msg"],
17 |         components: {
18 |             aaa : a
19 |         }
20 |     });
21 | </script>


--------------------------------------------------------------------------------
/tests/dist/list.js:
--------------------------------------------------------------------------------
 1 | define(function(require, exports, module) {
 2 |     require.loadCSS({url : "./css/test.css"});
 3 | 
 4 |     var a   = require("a");
 5 |     var Vue = require("vue");
 6 |     module.exports = Vue.component("xxx", {
 7 |         data : function() {
 8 |             return {
 9 |                 a : 23456
10 |             }
11 |         },
12 |         template : '<div class="list">{{a}}&#39;dfsadf&#39;<aaa :msg="a"></aaa></div>',
13 |         props : ["msg"],
14 |         components: {
15 |             aaa : a
16 |         }
17 |     });
18 | });


--------------------------------------------------------------------------------
/tests/vue/list.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="list">
 3 |         {{a}}'dfsadf'
 4 |         <aaa :msg="a"></aaa>
 5 |     </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |     var a   = require("a");
10 |     var Vue = require("vue");
11 | 
12 |     module.exports = Vue.component("xxx", {
13 |         data : function() {
14 |             return {
15 |                 a : 23456
16 |             }
17 |         },
18 |         template : '__template__',
19 |         props : ["msg"],
20 |         components: {
21 |             aaa : a
22 |         }
23 |     });
24 | </script>
25 | 
26 | <style href="./css/test.css"></style>


--------------------------------------------------------------------------------
/tests/dist/exports.js:
--------------------------------------------------------------------------------
 1 | define(function(require, exports, module) {
 2 |     var Vue = require("vue");
 3 |     exports.a = Vue.extend({
 4 |         data : function() {
 5 |             return {
 6 |                 name : "Vue.js"
 7 |             }
 8 |         },
 9 |         template : '<div class="app">{{name}}</div>'
10 |     });
11 |     exports.b = Vue.extend({
12 |         template : '<div class="app">{{name}}</div>'
13 |     });
14 |     exports.b = Vue.extend({
15 |         template : '<div class="app">{{name}}</div>'
16 |     });
17 |     exports.d = Vue.extend({
18 |         template : '<div class="app">{{name}}</div>'
19 |     });
20 | });


--------------------------------------------------------------------------------
/tests/vue/exports.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="app">{{name}}</div>
 3 | </template>
 4 | 
 5 | <script>
 6 |     var Vue = require("vue");
 7 | 
 8 |     exports.a = Vue.extend({
 9 |         data : function() {
10 |             return {
11 |                 name : "Vue.js"
12 |             }
13 |         },
14 |         template : '__template__'
15 |     });
16 | 
17 |     exports.b = Vue.extend({
18 |         template : '__template__'
19 |     });
20 | 
21 |     exports.b = Vue.extend({
22 |         template : '__template__'
23 |     });
24 | 
25 |     exports.d = Vue.extend({
26 |         template : '__template__'
27 |     });
28 | </script>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | 
17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18 | .grunt
19 | 
20 | # node-waf configuration
21 | .lock-wscript
22 | 
23 | # Compiled binary addons (http://nodejs.org/api/addons.html)
24 | build/Release
25 | 
26 | # Dependency directory
27 | node_modules
28 | 
29 | # Optional npm cache directory
30 | .npm
31 | 
32 | # Optional REPL history
33 | .node_repl_history
34 | 
35 | # Directory
36 | backup
37 | temp
38 | tests/node_modules
39 | .vscode
40 | .idea


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gulp-vue-module",
 3 |   "version": "0.1.3",
 4 |   "homepage": "https://github.com/pandao/gulp-vue-module",
 5 |   "description": "Gulp plugin for Vue.js `*.vue` component file complie to AMD / CMD / CommonJS module.",
 6 |   "main": "index.js",
 7 |   "scripts": {
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "keywords": [
11 |     "vue",
12 |     "amd",
13 |     "module",
14 |     "component",
15 |     "gulpplugin"
16 |   ],
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "git://github.com/pandao/gulp-vue-module.git"
20 |   },
21 |   "author": "Pandao",
22 |   "license": "MIT",
23 |   "dependencies": {
24 |     "gulp-util": "^3.0.7",
25 |     "node-sass": "^4.7.2",
26 |     "parse5": "^2.1.5",
27 |     "through2": "^2.0.1"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/tests/dist/app.js:
--------------------------------------------------------------------------------
 1 | //@moduleName app
 2 | //@moduleDeps a,b, vue/all
 3 | define("app", ["vue/all", "component/list"], function(require, exports, module) {
 4 |     require.loadCSS({content : "/*fdsafsdf*/.app {background:red;color:#fff;padding:10px;}.app span {font-size: 18px;}"});
 5 | 
 6 |     // indent 4
 7 |     var Vue           = require("vue/all");
 8 |     var listComponent = require('component/list');
 9 |     module.exports = Vue.extend({
10 |         data : function() {
11 |             return {
12 |                 a : 23456
13 |             }
14 |         },
15 |         methods : {
16 |             click : function() {
17 |                 console.log("click()");
18 |             }
19 |         },
20 |         components: {
21 |             'list-component' : listComponent
22 |         },
23 |         template : '<!-- Comment xxxx --><div class="app" @click="click" style="color:red;"><p>{{a}}&#39;ABC&#39;</p><list-component :msg="message"></list-component></div>'
24 |     });
25 | });


--------------------------------------------------------------------------------
/tests/Gulpfile.js:
--------------------------------------------------------------------------------
 1 | var fs        = require('fs');
 2 | var path      = require('path');
 3 | var gulp      = require('gulp');
 4 | var rename    = require('gulp-rename');
 5 | var VueModule = require('../index.js');
 6 | 
 7 | gulp.task('vue', function() {
 8 |     return gulp.src('./vue/**/*.vue')
 9 |                 .pipe(VueModule({
10 |                     debug         : true,
11 |                     //define        : false,  // Default true,  Using define wrapper module, false for Node.js (CommonJS style)
12 |                     amd           : true,   // Default false, AMD style, define module name and deps
13 |                     defineName    : true,   // define module name
14 |                     //templateReplaceTag : '__template__', // vue component template replace tag
15 |                     //loadCSSMethod : 'require.css' // define the load css method for require
16 |                 }))
17 |                 .pipe(rename({extname : ".js"}))
18 |                 .pipe(gulp.dest("./dist"));
19 | });
20 | 
21 | gulp.task('default', ['vue']);


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 pandao
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/tests/vue/app.vue:
--------------------------------------------------------------------------------
 1 | <header-comment>
 2 | //@moduleName app
 3 | //@moduleDeps a,b, vue/all
 4 | </header-comment>
 5 | 
 6 | <template>
 7 |     <!-- Comment xxxx -->
 8 |     <div class="app" @click="click" style='color:red;'>
 9 |         <p>{{a}}'ABC'</p>
10 |         <list-component :msg="message"></list-component>
11 |     </div>
12 | </template>
13 | 
14 | <script module-name="app" module-deps="vue/all,component/list">
15 |     // indent 4
16 |     var Vue           = require("vue/all");
17 |     var listComponent = require('component/list');
18 | 
19 |     module.exports = Vue.extend({
20 |         data : function() {
21 |             return {
22 |                 a : 23456
23 |             }
24 |         },
25 |         methods : {
26 |             click : function() {
27 |                 console.log("click()");
28 |             }
29 |         },
30 |         components: {
31 |             'list-component' : listComponent
32 |         },
33 |         template : '__template__'
34 |     });
35 | 
36 |     
37 | 
38 | </script>
39 | 
40 | <style lang="css">
41 |     /*fdsafsdf*/
42 |     .app {background:red;color:#fff;padding:10px;}
43 |     .app span {font-size: 18px;}
44 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # gulp-vue-module
  2 | 
  3 | Gulp plugin for [Vue.js](https://github.com/vuejs/vue) `*.vue` component file complie to AMD / CMD / CommonJS module.
  4 | 
  5 | Now, You can use [Require.js](https://github.com/requirejs/requirejs) / [Sea.js](https://github.com/seajs/seajs) ... etc. Front-end Module loader load Vue Component, not use [Webpack](http://webpack.github.io/) and [vue-loader](https://github.com/vuejs/vue-loader).
  6 | 
  7 | ### Usage
  8 | 
  9 | ```shell
 10 | $ npm install gulp-vue-module --save-dev
 11 | ```
 12 | 
 13 | `Gulpfile.js` :
 14 | 
 15 | ```javascript
 16 | var fs        = require('fs');
 17 | var path      = require('path');
 18 | var gulp      = require('gulp');
 19 | var rename    = require('gulp-rename');
 20 | var VueModule = require('gulp-vue-module');
 21 | 
 22 | gulp.task('vue', function() {
 23 |     return gulp.src('./vue/**/*.vue')
 24 |                 .pipe(VueModule({
 25 |                     debug : true
 26 |                 }))
 27 |                 .pipe(rename({extname : ".js"}))
 28 |                 .pipe(gulp.dest("./dist"));
 29 | });
 30 | 
 31 | gulp.task('default', ['vue']);
 32 | ```
 33 | 
 34 | `app.vue` :
 35 | 
 36 | > tag order : `<style>` > `<template>` > `<script>`, `<tempate>` tag must be at `<script>` tag before.
 37 | 
 38 | ```html
 39 | <style lang="scss">
 40 | $color:red;
 41 | 
 42 | .card {
 43 |     backround: $color;
 44 |     
 45 |     > .head {
 46 |         color: $color;
 47 |         background: yellow;
 48 |     }
 49 | }
 50 | </style>
 51 | 
 52 | <template>
 53 |     <div class="app" @click="click">
 54 |         <p>{{a}}</p>
 55 |         <list-component :msg="message"></list-component>
 56 |     </div>
 57 | </template>
 58 | 
 59 | <script>
 60 |     var Vue           = require("vue");
 61 |     var listComponent = require('component/list');
 62 | 
 63 |     module.exports = Vue.extend({
 64 |         data : function() {
 65 |             return {
 66 |                 id      : 23456,
 67 |                 message : 'Message'
 68 |             }
 69 |         },
 70 |         methods : {
 71 |             click : function() {
 72 |                 console.log("click()");
 73 |             }
 74 |         },
 75 |         components: {
 76 |             'list-component' : listComponent
 77 |         },
 78 |         template : '__template__'
 79 |     });
 80 | </script>
 81 | ```
 82 | > `<template>` tag unsupport set lang attribute, support set `include="/path/to/xxx.xxx"` attribute.
 83 | > 
 84 | > `<script>` tag unsupport set lang attribute, so you can't use ES6 syntax;
 85 | > 
 86 | > `<style>` tag support set `lang="css|scss|sass"` attribute, and support set `href="/path/to/xxx.(css|scss|sass)"` attribute link CSS file.
 87 | > 
 88 | > You can use `<header-comment>` tag insert the header comments
 89 | 
 90 | Output :
 91 | 
 92 | ```javascript
 93 | define(function(require, exports, module){
 94 |     // require.loadCSS() need you implement this function
 95 |     require.loadCSS({content : ".card{backround:red}.card>.head{color:red;background:yellow}"});
 96 | 
 97 |     var Vue           = require("vue/all");
 98 |     var listComponent = require('component/list');
 99 | 
100 |     module.exports = Vue.extend({
101 |         data : function() {
102 |             return {
103 |                 id      : 23456,
104 |                 message : 'Message'
105 |             }
106 |         },
107 |         methods : {
108 |             click : function() {
109 |                 console.log("click()");
110 |             }
111 |         },
112 |         components: {
113 |             'list-component' : listComponent
114 |         },
115 |         template : '<div class="app" @click="click"><p>{{a}}</p><list-component :msg="message"></list-component></div>'
116 |     };
117 | });
118 | ```
119 | 
120 | `require.loadCSS()` implement example :
121 | 
122 | ```javascript
123 | require.loadCSS = function(config) {
124 |     var head = document.getElementsByTagName("head")[0];
125 | 
126 |     if (config.content) {
127 |         var style  = document.createElement('style');
128 |         style.type = 'text/css';
129 |         
130 |         if (style.styleSheet) { // for IE
131 |             style.styleSheet.cssText = config.content;
132 |         } else {
133 |             style.innerHTML = config.content;
134 |         }
135 | 
136 |         head.appendChild(style);
137 |         callback();
138 |     }
139 |     else if (config.url) {
140 |         var link  = document.createElement('link');
141 | 
142 |         link.href = config.url;
143 |         link.rel  = 'stylesheet';
144 |         link.type = 'text/css';
145 |         head.appendChild(link);
146 |     }
147 | };
148 | ```
149 | 
150 | ### Options
151 | 
152 | ```javascript
153 | {
154 |     debug              : false,             // Debug mode
155 |     amd                : false,             // AMD style, Define module name and deps
156 |     define             : true,              // Using define() wrapper the module, false for Node.js (CommonJS style)
157 |     defineName         : false,             // Define the module name
158 |     indent             : '    ',            // Indent whitespace
159 |     headerComment      : true,              // Using <header-comment> Insert the header comments
160 |     templateReplaceTag : '__template__',    // vue component template replace tag
161 |     loadCSSMethod      : 'require.loadCSS', // define the load css method for require
162 |     externalRequire    : false              // don't pass require as a parameter
163 | }
164 | ```
165 | 
166 | > You can set `externalRequire` to true and inject `vue` into the file insted of requiring it internally.
167 | 
168 | ### Changes
169 | 
170 | [Change logs](https://github.com/pandao/gulp-vue-module/blob/master/CHANGE.md)
171 | 
172 | ### License
173 | 
174 | The [MIT](https://github.com/pandao/gulp-vue-module/blob/master/LICENSE) license.
175 | 
176 | Copyright (C) 2016 Pandao


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | var fs          = require('fs');
  2 | var path        = require("path");
  3 | var parse5      = require('parse5');
  4 | var gutil       = require('gulp-util');
  5 | var through     = require("through2");
  6 | var sass        = require("node-sass");
  7 | var PLUGIN_NAME = 'gulp-vue-module';
  8 | var LOG_PREFIX  = '[' + PLUGIN_NAME + '] ';
  9 | 
 10 | function getAttribute (node, name) {
 11 |     if (node.attrs) {
 12 |         var i = node.attrs.length, attr;
 13 | 
 14 |         while (i--) {
 15 |             attr = node.attrs[i];
 16 |             if (attr.name === name) {
 17 |                 return attr.value;
 18 |             }
 19 |         }
 20 |     }
 21 | }
 22 | 
 23 | module.exports = function(options) {
 24 |     var defaults = {
 25 |         debug              : false,               // Debug mode
 26 |         amd                : false,               // AMD style, Define module name and deps
 27 |         define             : true,                // Using define() wrapper the module, false for Node.js (CommonJS style)
 28 |         defineName         : false,               // Define the module name
 29 |         indent             : '    ',              // Indent whitespace
 30 |         headerComment      : true,                // Using <header-comment> Insert the header comments
 31 |         templateReplaceTag : '__template__',      // vue component template replace tag
 32 |         loadCSSMethod      : 'require.loadCSS',   // define the load css method for require
 33 |         externalRequire    : false                // don't pass require as a parameter
 34 |     };
 35 | 
 36 |     var settings = Object.assign({}, defaults, options),
 37 |         debug    = settings.debug,
 38 |         indent   = settings.indent,
 39 |         templateReplaceTag = settings.templateReplaceTag;
 40 |     
 41 |      return through.obj(function (file, encoding, callback) {
 42 |         if (file.isNull()) {
 43 |             return callback(null, file);
 44 |         }
 45 | 
 46 |         if (file.isStream()) {
 47 |             this.emit('error', new gutil.PluginError(PLUGIN_NAME, 'Cannot use streamed files'));
 48 |             return callback();
 49 |         }
 50 | 
 51 |         if (file.isBuffer()) {
 52 |             if (debug) {
 53 |                 console.log(LOG_PREFIX, "target =>", file.path);
 54 |             }
 55 |             
 56 |             var content  = file.contents.toString(encoding),
 57 |                 fragment = parse5.parseFragment(content, {
 58 |                     locationInfo: true
 59 |                 });
 60 |             
 61 |             var tags     = {}, 
 62 |                 contents = {
 63 |                     script   : [],
 64 |                     style    : [],
 65 |                     template : []
 66 |                 },
 67 |                 moduleName      = '',
 68 |                 moduleDeps      = '',
 69 |                 headerComment   = '',
 70 |                 includeFileName,
 71 |                 scriptEmpty     = false,
 72 |                 componentTags   = ['template', 'style', 'script'];
 73 |             
 74 |             fragment.childNodes.forEach(function (node) {
 75 |                 var type = node.tagName;
 76 |                 var lang = getAttribute(node, 'lang');
 77 |                 var href = getAttribute(node, 'href');
 78 |                 var src  = getAttribute(node, 'src');
 79 |                 
 80 |                 if (type === "header-comment") {
 81 |                     headerComment = parse5.serialize(node);
 82 |                 }
 83 |                 
 84 |                 if (componentTags.indexOf(type) >= 0) {
 85 |                     tags[type] = true;
 86 |                     
 87 |                     if (type === "style") {
 88 |                         var style = parse5.serialize(node);
 89 |                         
 90 |                         if (!lang || lang === "css") {
 91 |                             style.split("\n").forEach(function(line){
 92 |                                 if (line) contents.style.push(line.trim());
 93 |                             });
 94 |                             
 95 |                             style = contents.style.join("");
 96 |                             
 97 |                             if (style != "") {
 98 |                                 contents.style = '{content : "' + style + '"}';
 99 |                             }
100 | 
101 |                             if (href && href !== "") {
102 |                                 contents.style = '{url : "' + href + '"}';
103 |                             }
104 |                         }
105 |                         else if (lang && (lang === "sass" || lang === "scss")) {
106 |                             contents.style = [];
107 | 
108 |                             style.split("\n").forEach(function(line){
109 |                                 if (line) contents.style.push(line);
110 |                             });
111 |                             
112 |                             var result,
113 |                                 sassRenderOptions = {
114 |                                     outputStyle    : "compressed",
115 |                                     indentedSyntax : (lang === "sass") ? true : false,
116 |                                 };
117 | 
118 |                             if (href) {
119 |                                 sassRenderOptions.file = href;
120 |                             } else {
121 |                                 sassRenderOptions.data = contents.style.join("\n");
122 |                             }
123 | 
124 |                             result = sass.renderSync(sassRenderOptions);
125 |                             result = result.css.toString().replace("\n", "");
126 | 
127 |                             if (result !== "") {
128 |                                 contents.style = '{content : "' + result + '"}';
129 |                             }
130 |                         }
131 |                     }
132 |                     
133 |                     if (type === "template") {
134 |                         includeFileName = getAttribute(node, 'include');
135 |                         
136 |                         if (includeFileName) {
137 |                             var tpl = fs.readFileSync(includeFileName, 'utf-8');
138 |                             
139 |                             if (!tpl) {
140 |                                 console.error(LOG_PREFIX, "read template file error =>", includeFileName);
141 |                             }
142 |                         } else {
143 |                             var treeAdapter = parse5.treeAdapters.default,
144 |                                 docFragment = treeAdapter.createDocumentFragment();
145 | 
146 |                             treeAdapter.appendChild(docFragment, node);
147 | 
148 |                             var tpl = parse5.serialize(docFragment);
149 |                             tpl = tpl.replace('<template>', '').replace('</template>', '');
150 |                         }
151 |                             
152 |                         tpl.split("\n").forEach(function(line){
153 |                             if (line) contents.template.push(line.trim());
154 |                         });
155 | 
156 |                         contents.template = contents.template.join("").toString().replace(/'/g, "&#39;");
157 |                     }
158 |                     
159 |                     if (type === "script") {
160 |                         moduleName  = getAttribute(node, 'module-name');
161 |                         moduleDeps  = getAttribute(node, 'module-deps');
162 | 
163 |                         var script = parse5.serialize(node);
164 |                         
165 |                         if (script.split("\n").length <= 2) {
166 |                             scriptEmpty = true;
167 |                             script      = indent + "module.exports = {\n" + indent + indent + "template : '" + templateReplaceTag + "'\n" + indent + "};\n";
168 |                         }
169 |                         
170 |                         script.split("\n").forEach(function(line){
171 |                             if (line.trim() != "") {
172 |                                 line = line.replace(new RegExp(templateReplaceTag, "gi"), contents.template);
173 |                                 contents.script.push(line);
174 |                             }
175 |                         });
176 |                     }
177 |                 }
178 |             });
179 |             
180 |             if (settings.headerComment) {
181 |                 headerComment = headerComment.replace("\n", '');
182 |             } else {
183 |                 headerComment = '';
184 |             }
185 |             
186 |             var script        = contents.script.join("\n"), 
187 |                 deps          = '', 
188 |                 loadCSS       = '', 
189 |                 defineName    = '',
190 |                 moduleContent = '';
191 |             
192 |             if (typeof contents.style === "string" && contents.style != "") {
193 |                 loadCSS = indent + settings.loadCSSMethod + '('+contents.style+');\n\n';
194 |             }
195 |             
196 |             if (settings.defineName && moduleName) {
197 |                 defineName = '"' + moduleName + '", ';
198 |             }
199 |             
200 |             if (settings.amd && moduleDeps) {
201 |                 deps = [];
202 | 
203 |                 moduleDeps.split(/\s*,\s*/).forEach(function(dep){
204 |                     deps.push('"' + dep + '"');
205 |                 });
206 |                 
207 |                 deps = "[" + deps.join(", ") + "], ";
208 |             }
209 |             
210 |             if (settings.define) {
211 |                 if (settings.externalRequire) {
212 |                     moduleContent = 'define(' + defineName + deps + 'function('+ moduleDeps +') {\n' + loadCSS + script+'\n});';
213 |                 } else {
214 |                     moduleContent = 'define(' + defineName + deps + 'function(require, exports, module) {\n' + loadCSS + script+'\n});';
215 |                 }
216 |             } else {
217 |                 moduleContent = script;
218 |             }
219 | 
220 |             script = headerComment + moduleContent;
221 |             
222 |             content = script;
223 |             
224 |             if (!tags.script || !tags.template) {
225 |                 this.emit('error', new gutil.PluginError(PLUGIN_NAME, file.path + ' not vue component file, not have script and template tag'));
226 |                 return callback();
227 |             }
228 | 
229 |             file.contents = new Buffer(content);
230 |         }
231 |         
232 |         callback(null, file);
233 |     });
234 | }


--------------------------------------------------------------------------------