Namespace Pollution Mechanism
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

gulp-vuesplit

0.5.1 • Public • Published
VueJS Logo Gulp Logo

Gulp Vue Split
Sponsored by Version Downloads Build Status Dependencies

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

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

Sebastian Software GmbH Logo

Copyright 2016
Sebastian Software GmbH

install

npm i gulp-vuesplit

Downloadsweekly downloads

92

version

0.5.1

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability