Gulpfile for combining and compiling svelte controls with rollup and buble

gulpfile.js

/**
Note:
This is useing rollup the svelte pluing and buble plugin
If you do not want to use this, just adjust the command being created in `getRollupCommand` to
just make a commond to use the svelete-cli

This is also asuming that all components are in a folder structure like this:
- src
  - components
    - example_compent_name
      - example_compent_name.js
      - example_compent_name.html
      - example_compent_name.css

And that the output would be put into (you can set this on line 137)
- dist
  - components.js
*/

var gulp = require('gulp');
var del = require('del'); // used for removing files generated by the gulp task
var fs = require('fs');
var merge = require('merge2');
var path = require('path');
var plugins = require('gulp-load-plugins')(); // loads all packages with 'gulp-...'
var runSequence = require('run-sequence');

/** Component Generation */
gulp.task('components:compile', function(cb) {
    return runSequence( // run each task in sequence
        'copy-components',  // wraps js in <script> tags and css in <style> tags
        'combine-components', // puts the html, js and css in a single file with the .temp.html extension
        'generate-bundle-build-file', // generates a file that imports all single components and exports them all on an object
        'compile-bundle', // uses rollup with the svelte plugin to combile the components
        'cleanup-components', // deletes files generated during the process
        cb // informs gulp that the taks is complete
    );
});

gulp.task('copy-components', function() {
    return _copyComponent(getFolders('src/components'));
});

gulp.task('combine-components', function() {
    return _combineComponents(getFolders('src/components'));
});

gulp.task('generate-bundle-build-file', function() {
    return _generateBundleBuildFile(getFolders('src/components'));
});

gulp.task('compile-bundle', plugins.shell.task(['rollup -c -i src/components.build.js  -o dist/components.js']));

gulp.task('cleanup-components', function() {
    const getTempPaths = (name) => {
        return [
            'src/components/' + name + '/' + name + '.temp.css',
            'src/components/' + name + '/' + name + '.temp.html',
            'src/components/' + name + '/' + name + '.temp.js'
        ];
    };

    var paths = Array.prototype.concat.apply(['src/components.build.js'], getFolders('src/components').map(getTempPaths));

    return del.sync(paths);
});

// copies the components separate files and wraps non-html code in html tags
function _copyComponent(components) {
    const copyCSS = (name) => {
        return gulp.src('src/components/' + name + '/' + name + '.css')
            .pipe(plugins.insert.wrap('<style>\n', '</style>\n'))
            .pipe(plugins.rename(name + '.temp.css'))
            .pipe(gulp.dest('src/components/' + name));
    };
    const copyJS = (name) => {
        return gulp.src('src/components/' + name + '/' + name + '.js')
            .pipe(plugins.insert.wrap('<script>\n', '</script>'))
            .pipe(plugins.rename(name + '.temp.js'))
            .pipe(gulp.dest('src/components/' + name));
    };

    var tasks = components.map(copyCSS)
        .concat(components.map(copyJS));

    return merge(tasks);
}

// combines all the copied separate files into a single html files per component
function _combineComponents(components) {
    const combineFiles = (name) => {
        return gulp.src('src/components/' + name + '/' + name + '.{temp.css,html,temp.js}')
            .pipe(plugins.concat(name + '.temp.html'))
            .pipe(gulp.dest('src/components/' + name + '/'));
    };

    var tasks = components.map(combineFiles);

    return merge(tasks);
}

function _generateBundleBuildFile(components) {
    const importStatement = (name) => {
        return 'import ' + name + ' from \'./components/' + name + '/' + name + '.temp.html\';';
    };

    const exportKVP = (name) => {
        return '\t' + toPascal(name) + ': ' + name;
    };

    var buffer = [
        components.map(importStatement).join('\n'),
        '\nexport default {',
        components.map(exportKVP).join(',\n'),
        '};\n'
    ].join('\n');

    fs.writeFileSync('src/components.build.js', buffer);

    return true;
}

function _rollup(components) {
    var cmds = components.map(getRollupCommand);
    return plugins.shell.task(cmds)();
}

// makes a file called button be exported as Button so in you app you would do
// import { Button } from "yourBundle"
const toPascal = (str) => {
    return str[0].toUpperCase() + str.substring(1);
};

const getRollupCommand = (name) => {
    return 'rollup -c' +
        ' -i src/' + name + '.build.js' +
        ' -o dist/components/' + name + '.js';
};

// gets the name of all directories in a directory
function getFolders(dir) {
    return fs.readdirSync(dir)
      .filter(function(file) {
        return fs.statSync(path.join(dir, file)).isDirectory();
      });
}

package.json

{
  "name": "svelte-gulp",
  "devDependencies": {
    "del": "2.2.2",
    "gulp": "3.9.1",
    "gulp-concat": "2.6.1",
    "gulp-insert": "0.5.0",
    "gulp-load-plugins": "^1.2.2",
    "gulp-rename": "1.2.2",
    "gulp-shell": "0.4.2",
    "merge2": "1.0.2",
    "require-dir": "^0.3.0",
    "rollup": "^0.41.4",
    "rollup-plugin-buble": "^0.15.0",
    "rollup-plugin-commonjs": "^8.0.2",
    "rollup-plugin-eslint": "^3.0.0",
    "rollup-plugin-node-resolve": "^3.0.0",
    "rollup-plugin-svelte": "^1.7.0",
    "rollup-plugin-uglify": "^1.0.1",
    "run-sequence": "1.2.2",
    "svelte-cli": "1.3.5"
  }
}

rollup.config.js

import buble from 'rollup-plugin-buble';
import eslint from 'rollup-plugin-eslint';
import svelte from 'rollup-plugin-svelte';

// You MUST pass a input and output (-i / -o)
// ex) >rollup -c -i "main.js" -o "bundle.js"
export default {
  format: 'amd', // you may want a different format
  plugins: [
    svelte(),
    buble()
  ]
};