How to use the fuse-box.Sparky.task function in fuse-box

const path = require('path')
const isProduction = process.env.NODE_ENV === 'production' ? true : false

const POSTCSS_PLUGINS = [
  require("postcss-import")({
    root: path.join(__dirname, "src", "ui"),
    resolve: (id, base, options) => resolveId(id, options.root, options),
  }),
  require("postcss-cssnext")({
    browsers: ["ie >= 11", "last 2 versions"],
  })
]

Sparky.task('default', ['clean', 'copy-assets', 'build'], () => {})
Sparky.task('clean', () => Sparky.src(path.resolve("build")).clean(path.resolve("build")))
Sparky.task('clean-cache', () => Sparky.src(".fusebox/*").clean(".fusebox/"))
Sparky.task('copy-assets', () => Sparky.src("assets/**/**.*", {base: "./src/ui"}).dest("build"))
Sparky.task('build', () => {
  const fuse = FuseBox.init({
    alias: {
      "reactstrap-tether": '', // hack to fix `require is not defined` error
      "../../customModules/protocol/index.js": "protocol/index.js", // hack to have working path for app and tests
      "../../customModules/protocol/truffle.js": "protocol/truffle.js"
    },
    cache: !isProduction,
    debug: true,
    experimentalFeatures: true, // remove next major release of fb
    homeDir: 'src',
    //ignoreModules : [],
    log: true,
    modulesFolder: 'customModules',
    output: 'build/$name.js',

const {
  FuseBox,
  Sparky,
  CSSPlugin,
  JSONPlugin,
  EnvPlugin,
  WebIndexPlugin,
} = require('fuse-box')

let ENV = 'development'

let fuse, name

Sparky.task('init', () => {
  fuse = FuseBox.init({
    home: '.',
    output: 'dist/$name.js',
    tsConfig: './tsconfig.json',
    experimentalFeatures: true,
    useTypescriptCompiler: true,
    // sourceMaps: true,
    plugins: [
      CSSPlugin(),
      JSONPlugin(),
      EnvPlugin({ ENV }),
      WebIndexPlugin({
        template: `./src/${name}/index.html`,
      }),
    ],
  })

});

  // the name of the output file as specified $name in output part of init method 
  fuse_plugin.bundle(`${FOLDER_NAME}`)
    .watch().cache(false)
    .instructions(`
            + [**/*.html]
            + [**/*.ts]
            + [**/*.js]
            + [**/*.css]
        `).sourceMaps(true);

});


Sparky.task('clean', () => {
  return Sparky.src('../dev/').clean('../dev/');
});


Sparky.task('default', ['clean', 'config'], () => {

  fuse_plugin.run();

  fuse_sample.dev();
  fuse_sample.run();
});

FuseBox,
  Sparky,
  SassPlugin,
  WebIndexPlugin,
  CSSPlugin,
  CSSResourcePlugin,
  QuantumPlugin,
  VueComponentPlugin,
  Spark,
  CopyPlugin
} = require("fuse-box");

Sparky.task("clean", () => Sparky.src("./.fusebox").clean(".fusebox/"));
let isProduction = false;
let fuse;
Sparky.task("set-prod", () => {
  isProduction = true;
});
Sparky.task("clean", () => Sparky.src("./dist").clean("dist/"));
Sparky.task("watch-assets", () => Sparky.watch("./assets", {
  base: "./code"
}).dest("./dist"));
Sparky.task("copy-assets", () => Sparky.src("./assets", {
  base: "./code"
}).dest("./dist"));

Sparky.task("config", () => {
  fuse = FuseBox.init({
    homeDir: "code",
    output: "dist/$name.js",
    debug: !isProduction,
    useTypescriptCompiler: true,

"@angular/platform-browser/animations": "@angular/platform-browser/bundles/platform-browser-animations.umd.js",
  }
}

const devOptions = Object.assign({
  output: `${app.outputDir}/dev/$name.js`,
  sourceMaps: { project: true, vendor: true }
}, baseOptions);

const prodOptions = Object.assign({
  output: `${app.outputDir}/prod/$name.js`,
  sourceMaps: { project: false, vendor: false }
}, baseOptions)

Sparky.task("clean", () => Sparky.src(`${app.outputDir}`).clean(`${app.outputDir}`));
Sparky.task("assets.dev", () => Sparky.src(`./assets/**/*.*`, { base: `./${app.assetParentDir}`}).dest(`./${app.outputDir}/dev`));
Sparky.task("assets.prod", () => Sparky.src(`./assets/**/*.*`, { base: `./${app.assetParentDir}`}).dest(`./${app.outputDir}/prod`));
Sparky.task("build.dev", ["clean", "assets.dev"], () => undefined);
Sparky.task("build.prod", ["clean", "assets.prod"], () => undefined);

Sparky.task("serve.dev.spa", ["clean"], () => {
  const fuse = FuseBox.init(devOptions);
  fuse.opts = devOptions;
  fuse.dev({ port: app.server.port });
  fuse.bundle('js/vendor').hmr().instructions(' ~ client/main.ts');
  fuse.bundle('js/app')
    .instructions(' !> [client/main.ts]')
    .watch()
    .hmr();
  fuse.run()
});

if (!production) {
      app.watch(watch, watchFilter);

      if (target !== 'server') {
        fuse.dev(devServerOptions);
        app.hmr();
      } else if (runWhenCompleted) {
        app.completed(proc => proc.start());
      }
    }

    return await fuse.run();
  }
}

Sparky.task('default', ['main', 'renderer']);

Sparky.task('main', async () => {
  await new Builder({
    name: 'main',
    target: 'server',
    instructions: '> [main/index.ts]',
    watch: 'main/**',
  }).init();
});

Sparky.task('renderer', async () => {
  await new Builder({
    name: 'app',
    target: 'electron',
    instructions: '> [renderer/index.tsx]',
    watch: 'renderer/**',

.watch('src/**/**.ts')
  }

  example.watch('src/**/**.ts').hmr({
   socketURI: 'ws://localhost:3000',
  })
  fuse.dev({ port: 3000 })
  fuse.run()
})

Sparky.task('simpleExample', () => {
  name = 'simpleExample'
  Sparky.start('default')
})

Sparky.task('playground', () => {
  name = 'playground'
  Sparky.start('default')
})

Sparky.task('featureExample', () => {
  name = 'featureExample'
  Sparky.start('default')
})

Sparky.task('workerExample', () => {
  name = 'workerExample'
  Sparky.start('default')
})

.instructions(`
            + [**/*.html]
            + [**/*.ts]
            + [**/*.js]
            + [**/*.css]
        `).sourceMaps(true);

});


Sparky.task('clean', () => {
  return Sparky.src('../dev/').clean('../dev/');
});


Sparky.task('default', ['clean', 'config'], () => {

  fuse_plugin.run();

  fuse_sample.dev();
  fuse_sample.run();
});

const path = require('path')
const express = require('express')
const {
  FuseBox,
  Sparky,
  EnvPlugin,
  CSSPlugin,
  WebIndexPlugin,
  QuantumPlugin,
} = require('fuse-box')
let fuse, app
let isProduction = false

Sparky.task('config', _ => {
  fuse = new FuseBox({
    homeDir: 'src',
    hash: isProduction,
    output: 'dist/$name.js',
    cache: !isProduction,
    sourceMaps: !isProduction,
    target: 'browser',
    plugins: [
      EnvPlugin({ NODE_ENV: isProduction ? 'production' : 'development' }),
      WebIndexPlugin({
        title: 'React Typescript FuseBox Example',
        template: 'src/index.html',
      }),
      isProduction &&
        QuantumPlugin({
          bakeApiIntoBundle: 'app',

Sparky.task(taskName(__filename), () =>
  Sparky.src('node_modules/angulartics2/**').file(
    'angulartics2.d.ts',
    (f: SparkyFile) => {
      return new Promise((res, rej) => {
        const text = readFileSync(f.filepath).toString()
        const regex = new RegExp(/rxjs\/interfaces/, 'g')
        const newText = text.replace(regex, 'rxjs')
        writeFileSync(f.filepath, newText)
        res()
      })
    }
  )
)

Sparky.task('jest.zone.fix', () =>
  Sparky.src('node_modules/jest-preset-angular/**').file(
    'setupJest.js',
    (file: SparkyFile) => {
      file.read()
      const text = (file.contents as Buffer).toString()
      const regex = new RegExp(/require\('zone.js\/dist\/zone.js'\);/, 'g')
      const replacedText = text.replace(regex, "require('zone.js');")
      file.setContent(replacedText)
      file.save()
    }
  )
)