shinnn / gulp-svelte

A gulp 4 plugin to compile Svelte template to vanilla JavaScript

gulp-svelte

A gulp plugin to compile Svelte templates to JavaScript

Installation

Use npm.

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"; ...'
});

License

ISC License © 2017 - 2018 Shinnosuke Watanabe

gulp-svelte's Issues

Support preprocess

As far as I can tell, there's no way to preprocess using this plugin. Just wondering, is there a technical limitation or a suggested workaround?

If the implementation could be like the Svelte rollup plugin, I'd certainly be willing to submit a PR.

Svelte version 3.x

does this work with svelte 3.x?

Upgrade to the latest Svelte 2.x

Hello, been using gulp-svelte for several months now and it's been working great. I have a need to use Svelte v1.55 or later. Is it possible to update the dependency in npm? I just tried with a copy of the repo and it passed all tests.

Can submit a pull request if needed.

Thanks

Support IIFE/UMD modules

Currently if you specify "iife" or "umd" for options.format, Svelte throws an error due to options.name not being present. Technically you could specify that, too, but every file in the glob would get the same name.

I'm already working on a fix for this that infers options.name from the filename, the same way svelte-cli does. These are my changes so far. I'll send a PR once I've updated the tests.

External CSS?

Is it possible to extract the CSS into a separate file? Passing the css: false option disables css injection but I don't see any way of getting the rendered css.

README example doesn't use vinyl-fs

Couldn't get the example code snippet from the README to work but digging through the code I found I could get it to work if I piped a vinyl-fs stream to gulp-svelte.

Assuming that's correct, I'm in the process of submitting a pull request to update the README.