Gulp-svelte NPM

gulp-svelte

A gulp plugin to compile Svelte templates to JavaScript

Installation

npm install --save-dev gulp-svelte

API

const gulpSvelte = require('gulp-svelte');

gulpSvelte(options)

options: Object (options for Svelte compiler API and preprocess option)
Return: stream.Transform

const {dest, src, task} = require('gulp');
const gulpSvelte = require('gulp-svelte');

task('default', () => {
  return src('index.html') // index.html: '<h1>Hi {{author}}.</h1>'
  .pipe(gulpSvelte())
  .pipe(dest('dest')); // dest/index.js: 'function create_main_fragment ( state, component ) { ...'
});

Note:

format option doesn't support legacy JavaScript formats amd, iife and umd.
onerror option is not supported.
If css option receives false, it also emits an extracted CSS as a separate Vinyl object with a .css file extension.

const {dest, src, task} = require('gulp');
const gulpSvelte = require('gulp-svelte');

task('default', () => {
  return src('source.html') // source.html: '<style>p{color:red}</style><p>Hello</p>'
  .pipe(gulpSvelte({css: false}))
  .pipe(dest('dest'));
    // dest/source.js: '... p = createElement("p"); p.className = "svelte-16e8uch"; ...'
    // dest/source.css: 'p.svelte-16e8uch{color:red}'
});

options.preprocess

Type: Object

Modify contents with svelte.preprocess() passing this option to it before compiling the template.

const {dest, src, task} = require('gulp');
const gulpSvelte = require('gulp-svelte');

task('default', () => {
  return src('index.html') // index.html: '<b>original</b>'
  .pipe(gulpSvelte({
    preprocess: {
      markup({content}) {
        return {code: content.replace('original', 'modified')}
      }
    }
  }))
  .pipe(dest('dest')); // dest/index.js: '... b = createElement("b");\n\t\t\tb.textContent = "modified"; ...'
});