Features

Take as little or as much of it as you want, it integrates directly into existing Gulp-based workflows.

• Gulp for task running.
• A development server with:
  • a self-signed certificate for testing on your LAN†,
  • live-reload on file change, and
  • a remote console
• Auto-open your site in your default browser.
• For JavaScript, your choice of:
  • ES Next, including async/await,
  • TypeScript, as an alternative to Babel,
  • React JSX††.
• Stylus for CSS smashing††.
• Pug for HTML templating††, with some convenient goodies.

† To use this feature on Windows with PowerShell, you will need to install OpenSSL (one possible source of binaries on Windows is Shining Light Productions). This feature should work fine on Windows with Git Bash, as Git Bash runs on MINGW which has a copy of OpenSSL built in.

†† Other systems could be used, so long as they fit into a Gulp workflow. These are just the ones I've built and tested for my own projects. Feature requests accepted here. Contributors also accepted.

Motivation

I got sick of copy-pasta-ing gulpfile.js and chunks of package.json around to new projects. Copy-pasta is a sign of bad engineering practice. Also, my Gulpfiles were starting to get unwieldy, but breaking them out into modules just over-complicated the copy-pasta. So I started treating my build process as a project itself.

Through the process of maintaining my build process as a separate project unto itself, I have found that I can more easily keep the build clean and organized, make changes to the build that provide a clear path to upgrade for all consuming projects, and more rapidly test and release new projects thanks to not having to regrow a new build process for every new project.

The decision to release this as a public project came after spending a lot of time with beginners in the Node and JavaScript platform who wanted to do mostly the same stuff as me, but couldn't or didn't have the time to warp their heads around Gulp, Rollup, Babel, and whatever else is going on.

Getting Started

Marigold requires that you have a valid Node.js installation on your system, with NPM (installed by default when installing Node.js) as your package manager, with their associate executables available on your system PATH, so they may be executed from your CLI.

We've not tested Marigold against a lot of different versions of Node.js. We use the latest version we can, but there isn't any reason it shouldn't work with Node 6.x.x. If there are issues, please let us know and we will fix it immediately.

Node.js Beginners

Setup a new project

If you're starting a brand new project:

mkdir my-project
cd my-project
npm init
# only necessary if you've never worked with Gulp before
sudo npm install --global gulp-cli

NOTE: `sudo` is not necessary on Windows.

At this point, the NPM tool will walk you through setting up a package.json file. The values they ask for will be personal to your project. They are easy to change later, so don't fret too much about taking the default values.

You probably want a copy of this .gitignore file in your project root directory.

Everyone Else

Install Marigold

Once you have a package.json file, execute the following:

npm install --save-dev marigold-build

Create a few test files

mkdir src
echo "alert('Hello, World.');" > src/index.js
echo "body" > style.styl
echo "  font-family sans-serif" >> style.styl
echo "script(src='new-project' + jsExt)" > index.pug
echo "script(src='style' + cssExt)" >> index.pug
echo "h1 Hello, world." >> index.pug
# put this snippet at the end of all of your top-level pug templates
echo "!= liveReload" >> index.pug

Write a gulpfile.js

Marigold is built on top of Gulp. If you know Gulp, you can integrate Marigold alongside your existing build process. If you do not know Gulp, Marigold simplifies many common tasks for you, as Gulp may be a fine task runner, but very far from a build system.

Super-simple--but very constrained--default setup

If all you want is one src directory for JavaScript and a Pug and Stylus templates in the root directory, this can all be simplified down to:

require("marigold-build").defaultSetup();

A more realistic scenario

You'll probably want access to Gulp to be able to make your own tasks, as well as process more complex scenarios of JS files, like multiple bundles of different formats or different purposes. The default setup from the previous block ends up creating something very similar to the following. See APPENDIX: Example gulpfile.js for more information on what each call does.

var gulp = require("gulp"),
  pkg = require("./package.json"),
  marigold = require("marigold-build").setup(gulp, pkg),
  js = marigold.js({
    entry: "src/index.js",
    moduleName: "mySuperCoolModuleName",
  }),
  html = marigold.html(["*.pug"], { watch: ["*.md"] }),
  css = marigold.css(["*.styl"]),
  images = marigold.images(["*.png", "*.jpg"]),

  devServer = marigold.devServer(
    ["src/**/*.js"],
    [
      "!gulpfile.js",
      "*.js",
      "*.css",
      "*.html"
    ]);

marigold.taskify([js, html, css, images], { default: devServer });

Run the build process

For the most part, you'll just want to run:

gulp

This runs the default task, which runs the debug build configuration plus a local development server with live-reload and remote console. Other tasks include format (format the defined JavaScript files to match a default style), debug (run the build sans-dev-server), and release (run the build with minification options enabled).

An example output for Marigold itself with the default setup in place looks like:

sean@Moonpie:~/Projects/marigold$ gulp
[21:12:01] Using gulpfile ~/Projects/marigold/gulpfile.js
[21:12:01] Starting 'es2015:js:umd:debug'...
[21:12:01] Starting 'marigold-build:css:debug'...
[21:12:01] Starting 'marigold-build:html:debug'...
[21:12:02] Finished 'marigold-build:css:debug' after 1.77 s
[21:12:02] Starting 'watch:marigold-build:css:debug'...
[21:12:03] Finished 'watch:marigold-build:css:debug' after 26 ms
[21:12:03] Finished 'marigold-build:html:debug' after 2.02 s
[21:12:03] Starting 'watch:marigold-build:html:debug'...
[21:12:03] Finished 'watch:marigold-build:html:debug' after 21 ms
[21:12:03] Finished 'es2015:js:umd:debug' after 2.27 s
[21:12:03] Starting 'watch:es2015:js:umd:debug:only'...
[21:12:03] Finished 'watch:es2015:js:umd:debug:only' after 3.97 ms
[21:12:08] Starting 'default'...
[21:12:08] Mode is dev
[21:12:08] Serving from directory ~/Projects
[21:12:08] Listening on port 8080
[21:12:08] starting insecure server
[21:12:08] starting the WebSocket server
http://localhost:8080/marigold-build/
[21:12:08] starting:  explorer http://localhost:8080/marigold-build/
[21:12:08] Finished 'default' after 206 ms
GET /marigold-build/ 200 6.124 ms - 89299
GET /marigold-build/index.css 200 2.194 ms - 1598
GET /marigold-build/node_modules/socket.io-client/dist/socket.io.js 304 2.780 ms - -
[21:12:08] new client connection. Total clients: 1
new socket!
CMD:>
LOG:>  Live reload enabled.

CMD:> |

API

Marigold provides a small API for performing specific, common tasks, rather than a generic API for performing any task. Use Gulp on your own for less common setups. There are two options for initializing Marigold:

• defaultSetup([options]) - a single-line setup for the most common of project setups. Returns no task builders.
• setup(gulp, pkg) - constructs a tool for generating common build tasks with more control over individual options. Returns the marigold namespace for the following task builders:
  • js([options]) - a task builder for transpiling, concatenating, and minifying JavaScript code.
  • html(files, [options]) - a task builder for generating HTML files from Pug templates.
  • css(files, [options]) - a task builder for generating CSS files from Stylus templates.
  • images(files, [options]) - a task builder for shrinking image files for release.
  • clean(files, [dependencies, options]) - a task builder for deleting intermediate files.
  • devServer([watchForStop, watchForReload, options]) - a task builder for starting the development web server.
  • taskify(taskConfigs, [postTasks]) - slice the tasks grouped by job into jobs grouped by task, with an option to run an additional task.
  • exec(cmd, [options, callback]) - a task builder for executing an arbitrary system command.

defaultSetup([options])

The defaultSetup() function expects a specific, minimal project directory structure:

• src/ - a folder to hold all of your JavaScript files.
  • index.js - the root of your JS bundle. Use ES2015 imports to create the dependency graph that gets included in the bundle.
• *.pug - Any Pug templates you want processed. You'll probably at least want an index.pug that includes your script bundle as fileRoot + packageName + jsExt.
• *.styl - Any Stylus templates you want processed. Include them in your Pug templates as fileRoot + "yourStyleSheetNameSansExtension" + cssExt.

It defines tasks for:

• A debug task:
  • Generating ES5 code from a bundle definition specified at src/index.js:
    • Transpiling ES2015 to ES5.
    • Resolving module imports.
    • Concatenating your script files to a single bundle.
  • Generating HTML files from Pug templates for all *.pug files in the project root directory. Root Pug files may reference any includable Pug files from any other directory.
  • Generating CSS files from Stylus templates for all *.styl files in the project root directory.
• A default task, which defines all of the same tasks as the debug task, plus
  • Watchers for each of the input file types to restart the translation processes.
  • A development server to host files and features that cannot be hosted through the "insecure context" of the file system, such as images for WebGL textures, WebSockets, AJAX requests, etc.
  • Default browser executed automatically to load your project root directory, either displaying your index.html file, or listing the directory contents if you do not have an index.html.
  • Live-reload for when the translation processes finish.
• A release task, which defines all of the same tasks as the debug task, plus minification for the JS, HTML, and CSS

Parameters

• options - hash-map Object:
  • jsDir - a String specifying path to the directory containing the index.js file that defines your app bundle. Defaults to "src" if no jsDir value or no options hash are provided.

setup(gulp, pkg)

Initializes and returns the Marigold namespace containing the Task functions below, as well as the following gulp tasks:

• bump - increment the patch portion of the version field in package.json.
• bumpMinor - increment the minor portion of the version field in package.json.
• bumpMajor - increment the major portion of the version field in package.json.
• yolo - WARNING Only use this task if you are confident with your deployment process. This task
  • executes the release build,
  • stages all of the changed files to a git commit,
  • creates the git commit using the latest version number in package.json as the message, and
  • pushes the current branch to the remote.

Parameters

• gulp - An instance of the Gulp module that you have required into your gulpfile.js. It is necessary to explicitly pass in the Gulp module so that all tasks will be created in the same workspace.
• pkg - Your package.json file, required in as an Object.

Return Value

The Marigold namespace.

Task functions

marigold.js([options])

The marigold.js() task generator is by far the most complex, as Marigold assumes you intend to manage your project complexity in your JavaScript source code and not your HTML or CSS.

This task generator is responsible for taking ES2015, TypeScript, or React JSX code and translating it to ES5, and concatenating all modules into a single bundle. See the options parameter for how the behavior may be changed to add other features, e.g. source-maps.

Parameters

• options - hash-map Object
  • advertise - A Boolean indicating whether or not the bundle should have a console.info() call appended to it that announces the name of the package being bundled for folks snooping around in the browser's JavaScript console. Defaults to false.
  • banner - A String representing an arbitrary block of text to include in the top of the bundled file.
  • dependencies - An Array of Strings naming Gulp tasks that must be ran before this task can run.
  • dest - A String indicating the directory to which to save the output bundle.
  • disableGenerators - A Boolean to control whether or not to include support for JavaScript generators--and thus async/await--as it requires the inclusion of a sizable runtime dependency. Defaults to false.
  • entry - The path to the top of your module tree. Use *.js files for ES2015, *.ts files for TypeScript, and *.jsx files for React JSX. Defaults to "src/index.js".
  • exclude - An Array of Strings defining file glob patterns to never include in the bundle. Defaults to ["node_modules/**"].
  • external - An Array of Strings naming the modules that should not be included in the bundle. Defaults to the key values from the globals option. For example, if you have a dependency on Three.js, you would not want to include Three.js in your distribution package, so you would set external to ["three"].
  • extractDocumentation - A Boolean indicating whether or not the bundle contains pliny documentation expressions. These expressions will need to be extracted out to their own file after the bundle has been concatenated. Defaults to false.
  • fileName - A String specifying the name of the file to output. By default, will be a combination of the name option, plus the format in some way ("umd" format will append nothing, "es" will append ".modules", everything else will append the format name), before the file extension (which defaults to ".js"). If extractDocumentation is set to true, a file with the word "WithDoc" prepended before the module format in fileName will be used to store the full bundle, the fileName will be used to write the bundled file without documentation, and a file with the word "Documentation" prepended before the module format will be used to write the pliny documentation output.
  • format - The module format to generate. Rollup supports Asynchronous Modules ("amd"), CommonJS ("cjs"), ES2015 Modules ("es"), Immediately Invoked Function Expression ("iife"), and Universal Module Definition ("umd")--which encapsulates AMD, CommonJS, and IIFE. Defaults to "umd". Also used in naming the tasks that this function generates.
  • globals - A hash-map Object that defines the names of modules that are already available at runtime as global variables. For exmple, if you have a dependency on Three.js, you would include Three.js via a script tag in your page, so you would set globals to { "three": "THREE" }.
  • moduleName - A String that names the variable that contains the module exported by the entry-point, if it exports anything at all. Only useful for bundle formats that are intended to be loaded by the browser. Defaults to the package name, converted to UpperCase, e.g. "my-super-package" becomes "MySuperPackage".
  • name - A String that is used to help name the tasks that are being generated (so as to differentiate them from other, similar tasks) and--if necessary--generate the output file and module names. Defaults to the name of the directory containing the entry file, unless that directory is src/, in which case it uses the package name from package.json.
  • sourceMap - A Boolean indicating whether or not source maps should be generated alongside the bundle. Defaults to true for debug builds. Disabled in release builds.
  • transpileOnDebug - A Boolean indicating whether or not ES2016 code should be transpiled to ES5 while building in Debug mode. Defaults to false.

Return Value

Returns a task name definition Object, having the following fields. You will need these fields to be able to combine configurations from different tasks into more friendly-named tasks by configuration. Marigold generates a lot of tasks and the names of those tasks must be unique as Gulp overwrites existing tasks if a new task of the same name is created.

• default: A String name for the Gulp task generated to translate your JavaScript code, in the debug configuration, with file watchers to restart the translation.
• debug: A String name for the Gulp task generated to translate your JavaScript code, in the debug configuration, without file watchers.
• release: A String name for the Gulp task generated to translate your JavaScript code before releasing to production.

marigold.html(files, [options])

Generates HTML files from Pug templates. There are a number of convenient goodies that will be available to your Pug templates.

Parameters

• files - An Array of Strings defining file glob patterns that find Pug files to translate.
• options - hash-map Object
  • watch - An Array of Strings defining file glob patterns that find additional files to watch to restart the translation process. Useful for when you're generating HTML from Markdown documents through Pug's plugin filter feature.
  • name - A String used to define the Gulp task name, to help differentiate it from other tasks in the build process. Defaults to the package name from package.json.

Return Value

Returns a task name definition Object, having the following fields. You will need these fields to be able to specify task dependencies with other Gulp tasks. Marigold generates a lot of tasks and the names of those tasks must be unique as Gulp overwrites existing tasks if a new task of the same name is created.

• default: A String name for the Gulp task generated to translate your Pug code, in the debug configuration, without minification, with file watchers to restart the translation.
• debug: A String name for the Gulp task generated to translate your Pug code, in the debug configuration, without minification, without file watchers.
• test: A String name for the Gulp task generated to translate your Pug code, in the release configuration, without minification,
• release: A String name for the Gulp task generated to translate your Pug code, in the release configuration, with minification.

marigold.css(files, [options])

Generates CSS files from Stylus templates. This is the least-developed part of Marigold, as my personal usage usually only involves making Canvas elements fill the page.

Parameters

• files - An Array of Strings defining file glob patterns that find Stylus files to translate.
• options - hash-map Object
  • name - A String used to define the Gulp task name, to help differentiate it from other tasks in the build process. Defaults to the package name from package.json.

Return Value

Returns a task name definition Object, having the following fields. You will need these fields to be able to specify task dependencies with other Gulp tasks. Marigold generates a lot of tasks and the names of those tasks must be unique as Gulp overwrites existing tasks if a new task of the same name is created.

• default: A String name for the Gulp task generated to translate your Stylus code, without minification, with file watchers to restart the translation.
• debug: A String name for the Gulp task generated to translate your Stylus code, without minification, without file watchers.
• release: A String name for the Gulp task generated to translate your Stylus code with minification.

marigold.images(files, [options])

Compresses images and strips them of unnecessary metadata, to make them as small as possible. Only creates a release build task. Does not run during default or debug.

Parameters

• files - An Array of Strings defining file glob patterns that find JPG, PNG, or GIF files.
• options - hash-map Object
  • name - A String used to define the Gulp task name, to help differentiate it from other tasks in the build process. Defaults to the package name from package.json.

Return Value

Returns a task name definition Object, having the following fields. You will need these fields to be able to specify task dependencies with other Gulp tasks. Marigold generates a lot of tasks and the names of those tasks must be unique as Gulp overwrites existing tasks if a new task of the same name is created.

• release: A String name for the Gulp task generated to minify your images.

marigold.clean(files, [dependencies, options])

Deletes files. Use it to clean up intermediate files that you don't want to end up in your repository after a release build.

Parameters

• files - An Array of Strings defining file glob patterns that find Stylus files to translate.
• dependencies - An Array of Strings naming Gulp tasks that must be ran before this task can run. Make sure this contains an array of your release tasks.
• options - hash-map Object
  • name - A String used to define the Gulp task name, to help differentiate it from other tasks in the build process. Defaults to the package name from package.json.

Return Value

Returns a single task name for the clean task that was generated.

marigold.devServer([watchForStop, watchForReload, options])

Run a local web server that can signal your running application to reload when changes have been made.

It's necessary to run a local web server for two reasons:

1. So you may access the running version of your site from a mobile device.
2. So you may have access to browser features that browser vendors have decided should not be available to HTML files loaded from "file://" URLs, such as:

• Using images as WebGL textures,
• Making AJAX requests,
• Working with Service Workers,
• Gaining access to the user's webcam and microphone with getUserMedia(),
• Gaining access to the user's VR headset with getVRDisplays(),
• etc.

Parameters

• watchForStop - An Array of Strings defining file glob patterns for files to watch for changes to send the "STOP" signal to open applications. This is useful in the case of WebGL applications that take a lot of processing power, to give that power back to the system so that Marigold tasks may complete in a timely manner.
• watchForReload - An Array of Strings defining file glob patterns for files to watch for changes to send the "RELOAD" signal to open applications. This is useful to automatically see what changes you've made without having to manually reload the application in your browser.
• options - hash-map Object
  • debounceDelay - a Number of milliseconds to wait after a file has changed to see if any other files have changed, to avoid sending multiple "RELOAD" signals for one "save all files" operation. Defaults to 250 ms.
  • port - the port Number on which to run the server. Defaults to 8080. Servers on port 80 require administrator access on Unix systems.
  • path - A String specifying a file path to where the server should consider the root file system. Defaults to the parent directory of the currently working directory.
  • url - A String specifying the document to open at the local server in the browser after the server has successfully started. Defaults to the name of the current working directory, so that combined with the default path property, you will immediately see your index.html file, or a file listing of your project root directory.
  • instances - A Number indicating how many instances of the browser to start. Defaults to 1.
  • instance - A Function that receives an instance index and query object to be used by Node's url.format function to construct a URL. If no function is provided, no modification to options.url will be made on a per-instance basis and all instances will load the same, exact URL.
  • browser - A String specifying a browser to run. Defaults to using the default browser.
  • key - A String defining a path to a TLS private key file. Optional to run in HTTPS mode. If no key and cert value are provided, a self-signed certificate will be generated at runtime.
  • cert - A String defining a path to a TLS certificate file. Optional to run in HTTPS mode. If no key and cert value are provided, a self-signed certificate will be generated at runtime.
  • certAuthority - A String defining a path to a TLS certificate authority file. Options for running HTTPS mode.
  • secure - When set to false, ignores the value of key and cert to force HTTP mode. Defaults to true.
  • controllerDirectory - A String path to a directory containing handlers for RESTful HTTP requests.
  • webSocketServer - A Function that accepts Socket.IO connections.
  • expressServer - A Function that accepts an Express app object and sets up middleware functions.

marigold.taskify(taskConfigs, [postTasks])

Invert the grouping of tasksConfigs so that each type of task can be ran together as a block for a specific configuration.

Parameters

• taskConfigs - An Array of task groups that were returned from calls to marigold.js, marigold.html, marigold.css, etc.
• postTasks - An optional hash-map Object defining an additional task to run for each configuration group.

Return Value

none.

marigold.exec(cmd, [options, callback])

Execute system calls.

Parameters

• cmd - A String defining the CLI system call to execute.
• options - A hash-map Object defining the logging functions to use for STDOUT and STDERR.
  • log - A Function that can process output on STDOUT and echo it in the running Gulp process.
  • error - A Function that can process output on STDOUT and echo it in the running Gulp process.
• callback - A Function to call when the system call completes.

Return Value

If no callback parameter is provided, creates a function that accepts a callback. This function executes the system call and then executes the callback when the system call is complete. This is useful for making Gulp tasks that execute system calls.

If a callback parameter is provided, it's used to execute the previous function immediately.

APPENDIX: Convenient Pug goodies

When your Pug templates are processed, there will be a number of data properties available to your template that are not standard Pug features, but make using Pug a lot easier.

• pkg, an Object loaded from the package.json file.
• debug, a Boolean indicating the build environment (true = Debug, false = Release), allowing for the addition/subtraction of template chunks.
• liveReload, a String having a value that is blank when debug === false, or otherwise contains the necessary code to include Socket.IO and connect to the development server to be able to reload the page automatically when you make changes when debug === true. Just include != liveReload at the end of your template.
• fileRoot, a String containing enough repetitions of "../" for the current file to make project-specific absolute file references, in case you're running in a sub-directory of your domain,
• name, a String containing the name of the current Pug template file, without its containing directory name or file extension. Useful for repetitively generating demo pages that have similar structures.
• cssExt, a String having the value ".css" when debug === true, or ".min.css" when debug === false.
• jsExt, a String having the value ".js" when debug === true, or ".min.js" when debug === false.
• jpgExt, a String having the value ".jpg" when debug === true, or ".min.jpg" when debug === false.
• jpegExt, a String having the value ".jpeg" when debug === true, or ".min.jpeg" when debug === false.
• svgExt, a String having the value ".jpg" when debug === true, or ".min.svg" when debug === false.
• pngExt, a String having the value ".png" when debug === true, or ".min.png" when debug === false.
• gifExt, a String having the value ".gif" when debug === true, or ".min.gif" when debug === false.
• exists(), a Function for testing if any particular file exists.
• readFile(), a Function for dumping the contents of any text file into the file generated by the template.
• dir(), a Function for listing all of the files in a directory relative to the current file.

APPENDIX: Example gulpfile.js

// Setup a new collection of Gulp tasks:
var gulp = require("gulp");

// There is some information in the package.json that both the build system
// and our own script will find useful.
var pkg = require("./package.json"),

// This is Marigold. Provide it your Gulp task collection and package.json.
var marigold = require("marigold-build").setup(gulp, pkg);


// Build a JavaScript bundle. This supports translating ES2015 (aka ES6) code to
// ES5 (aka "the JavaScript all browsers actually have") using Babel, resolving
// import statements and bundling modules together using Rollup, and creating a
// watcher task to rerun the task if any files were changed.
var js = marigold.js({

    // Provide the entry point for the bundle. It's best to put the entry
    // point in its own directory so the change watcher doesn't end up
    // watching the node_modules directory, too.
    // NOTE: providing a JSX file will automatically process React code, and
    // providing a TS file will automatically process TypeScript code.
    entry: "src/index.js",

    // The `moduleName` property is only necessary if:
    //  A) the entry point exports a value, and
    //  B) you don't like the auto-generated name for the module (which will
    //     be the task name prefix, in UpperCamelCase, with any hyphens
    //     removed).
    moduleName: "mySuperCoolModuleName",

    // Other options include:
    // -- name: if you're running multiple build tasks of the same type,
    //           (js, html, css), you will need a name-prefix to different-
    //           iate them. The build system will postfix the value you provide
    //           to differentiate between the tasks *it* creates, so by default
    //           this value is just the name of your project in package.json.
    // -- watch: additional files to watch for restarting the build. By
    //           default, the system watches all of the files in the parent
    //           directory of the entry point file.
    // -- advertise: whether or not to include a `console.info()` printout
    //           with information from the package.json advertising the
    //           package you are building. Useful for giving hints to people
    //           snooping around in the browser's JavaScript console. Defaults
    //           to false.
    // -- banner: Add whatever text you want to the top of the bundle file.
    // -- format: The module format to generate. Options are:
    //     (default) "umd": Universal Module Definition.
    //     "es": for ES2015 modules. The output file's extension will be
    //           ".modules.js", unless you explicitly define a fileName.
    //     "iife": Immediately Invoked Function Expression. The output file's
    //           extension will be ".iife.js", unless you explicitly define a
    //           fileName.
    //     "amd": Asynchronous Module Definition. The output file's extension
    //           will be ".amd.js", unless you explicitly define a fileName.
    //     "cjs": CommonJS. The output file's extension will be ".cjs.js",
    //           unless you explicitly define a fileName.
  });


// Generate HTML files from Pug templates.
var html = marigold.html(
    ["*.pug"],

    // Options:
    {

      // Additional files to watch for changes to kick-off rerunning the task.
      watch: ["*.md"]
    });

// Generate CSS files from Stylus templates.
var css = marigold.css(["*.styl"]);

// Crunch images down to their most useful size.
var images = marigold.images(["*.png", "*.jpg"]);


// Create a development server
var devServer = marigold.devServer(

  // Files to watch to send a "STOP" command to all loaded apps. Useful in
  // scenarios like WebGL where the app may be taking a significant amount of
  // processing power that will slow down the build process. In other words, a
  // polite way of asking the app to stop what it is doing so Marigold can do
  // its work.
  ["test/**/*.js"],

  // Files to watch to send a "RELOAD" command to all loaded apps.
  [
    "!gulpfile.js",
    "*.js",
    "*.css",
    "*.html"
  ]);

// Take each of the task groups (js, html, css, images), and slice them into task groups
// by configuration name (format, default, debug, release). Optionally, add an
// additional task after the group runs, by the same set of names.
marigold.taskify([js, html, css, images], { default: devServer });

APPENDIX: Dependencies

Marigold depends on the following projects:

• Babel - v6.24.0
• glob - v7.1.1
• Gulp - v3.9.1
• jstransformer-marked - v1.0.2
• marked - v0.3.6
• pliny - v3.3.5
• React - v15.4.1
• Rollup - v0.36.3
• Socket.IO - v1.4.4
• TypeScript - v2.2.1