This package has been deprecated

Author message:

Not maintained anymore.

Gulp Vue Split

A trivial solution for splitting .vue files for VueJS at compile time for later processing using "normal" CSS and JavaScript tools.

Supports CSS module preprocessing for prevention of naming conflicts between components.

Uses a memory cache during runtime to omit regenerating files with probably unchanged content.

Links

• GitHub
• NPM

Installation

Should be installed locally in your project source code:

npm install gulp-vuesplit --save-dev

Usage with Gulp

import vueSplit from "gulp-vuesplit"
 
gulp.task("vuesplit", function() {
  return gulp.src("src/**/*.vue").
    pipe(vueSplit()).
    pipe(gulp.dest("."))
})

This generates the extract/processed .html, .css, .js files to the same folder as the source .vue file.

Configuration

Currently vuesplit can be configured with the following settings:

• cssFilenameScoped : instead of postfixing created CSS classes with a unique hash, prefix the name of the generated CSS with the name of the component file.

Example:

import vueSplit from "gulp-vuesplit"
 
gulp.task("vuesplit", function() {
  return gulp.src("src/**/*.vue").
    pipe(vueSplit({cssFilenameScoped: true})).
    pipe(gulp.dest("."))
})
 
 

Example Vue-File (Test.vue)

<style>
  .message{
    border: 2px solid red;
  }
 
  .title{
    font-size: 3em;
  }
 
  .buttonbar{
    width: auto;
  }
 
  .cancel{
    background: red;
  }
 
  .okay{
    background: green;
  }
</style>
 
<template>
  <div css-module="message">
    <h1 css-module="title">{{msg}}</h1>
    <p>Intro text</p>
    <div css-module="buttonbar">
      <button css-module="cancel">Cancel</button>
      <button css-module="okay">Save</button>
    </div>
  </div>
</template>
 
<script>
  import template from "./Test.html";
  export default {
    template: template,
    data: function () {
      return {
        msg: "Hello world!"
      }
    }
  }
</script>

Result

Test.css

.message-a5ecea91{
  border: 2px solid red;
}
 
.title-a5ecea91{
  font-size: 3em;
}
 
.buttonbar-a5ecea91{
  width: auto;
}
 
.cancel-a5ecea91{
  background: red;
}
 
.okay-a5ecea91{
  background: green;
}

Test.js

import template from "./Test.html";
export default {
  template: template,
  data: function () {
    return {
      msg: "Hello world!"
    }
  }
}

Test.html

<div class="message-a5ecea91">
  <h1 class="title-a5ecea91">{{msg}}</h1>
  <p>Intro text</p>
  <div class="buttonbar-a5ecea91">
    <button class="cancel-a5ecea91">Cancel</button>
    <button class="okay-a5ecea91">Save</button>
  </div>
</div>

Please note: The HTML is been compressed (using html-minifier) into a ES6 compatible module format instead of writing a HTML file:

export default "<div class=message-a5ecea91><h1 class=title-a5ecea91>{{msg}}</h1><p>Intro text<div class=buttonbar-a5ecea91><button class=cancel-a5ecea91>Cancel</button> <button class=okay-a5ecea91>Save</button></div></div>"

Copyright

Copyright 2016
Sebastian Software GmbH