gulp-vue-compiler

gulp-vue-compiler

This plugin compiles Vue single file components (SFC) to plain JavaScript.

Installation

npm install gulp-vue-compiler --save-dev

Any other plugin or dependency such as babel-core should be installed as well.

Usage

var vueCompiler = require('gulp-vue-compiler');

gulp.task('vue-compile', function() {
  return gulp.src('components/**/*.vue')
    .pipe(vueCompiler({ /* options */ }))
    .pipe(gulp.dest('./dist/'));
});

Implementation details and options

• options.newExtension: Optionally modifies the output files extension to the new string.

• v0: Vueify's API is used internally. Therefore, any valid option for Vueify is valid here as well. See Vueify options here. Additionally, options.ESModules boolean option is available for removing the closure that Vueify adds automatically (which breaks ES modules). Passing modules: false in Babel's env preset automatically activates this option.

• v1: Uses vue-component-compiler internally (more info here). options.esModule (default true), options.parserConfig, options.templateCompilerConfig, options.babel. Beta release does not support style tags.

Examples

• Compiling *.vue components to plain JavaScript using Babel and ES modules:

return gulp.src('components/**/*.vue')
  .pipe(vueCompiler({
    newExtension: 'js', // *.vue => *.js
    babel: {
      babelrc: false,
      presets: [
        ['env', {
          modules: false, // Keep ES modules in 'script' tag
          targets: {
            browsers: [ '> 1%', 'last 2 versions' ]
          }
        }],
        'stage-3'
      ]
    }
  }))
  .pipe(gulp.dest('./dist/'));