gulp-graphviz-deps

Generates a graphviz document of your gulp tasks' dependencies

Usage

Imagine you have the following gulpfile.js

var gulp = require('gulp');


// Add some tasks
gulp.task('default', ['build']);
gulp.task('build', ['build-js', 'build-css']);
gulp.task('build-js', function() {})
gulp.task('build-css', ['build-sprites'], function() {})
gulp.task('build-sprites', function() {})

But you want to view the dependencies graphically.

Run npm install --save-dev gulp-graphviz-deps and add the following to your gulpfile.js

var gulp = require('gulp');
+var deps = require('gulp-graphviz-deps');

+// Add a task to render the output
+gulp.task('deps', function(){console.log(deps());});

// Add some tasks
gulp.task('default', ['build']);
gulp.task('build', ['build-js', 'build-css']);
gulp.task('build-js', function() {})
gulp.task('build-css', ['build-sprites'], function() {})
gulp.task('build-sprites', function() {})

Now run gulp deps, and you'll see this:

digraph Dependencies
{
    graph [rankdir="LR",tooltip=" "]

    "build" [fillcolor="white",style="filled"]
      "build" -> "build-js"
      "build" -> "build-css"

    "build-css" [fillcolor="#118EC4",style="filled"]
      "build-css" -> "build-sprites"

    "build-js" [fillcolor="#FEDA3E",style="filled"]

    "build-sprites" [fillcolor="white",style="filled"]

    "default" [fillcolor="white",shape="doublecircle",style="filled"]
      "default" -> "build"
}

This is graphviz code. Running the graphviz tool dot over this text will produce a graphical representation of this dependency graph:

Running Graphviz Automatically

TODO

gulp.task('inception', ['compile'], function() {
    var myGraphViz = require('./index.js')();
    fs.writeFileSync('inception.txt', myGraphViz);
    console.log('Wrote my own dependencies as a graphviz document to inception.txt. I am about to try running dot over this file, if dot is not in the path this will fail');

    return gulp.src('inception.txt')
        .pipe(shell('dot inception.txt -O -Tpng -Tsvg'));
});

Configuration

TODO

interface Options {
    showTaskCodeAsTooltip?: boolean;
    styleRules?: StyleRule[];
    implicitDependencies?: StyleRule[];
    missingDependencyStyles?: Styles;
    graphStyles?: Styles;
}

interface StyleRule {
    matcher: RegExp;
    styles: Styles;
}

interface Styles {
    [s: string]: string;
}

var defaults = {
    showTaskCodeAsTooltip: true,
    styleRules: [
        { matcher: /default/, styles: { shape: "doublecircle" } },
        { matcher: /watch/, styles: { shape:"rarrow" } },
        { matcher: /js|script|compile/, styles: { fillcolor: "#FEDA3E" } },
        { matcher: /css|style|less|sass/, styles: { fillcolor: "#118EC4"} },
        { matcher: /test|spec|unit/, styles: { fillcolor: "#B29259", shape:"tab" } }
    ],
    implicitDependencies: [
        { matcher: /gulp.watch\(\s*[^;]*?\[([^;]+)\]\s*\)/g, styles: { color: "#999999", style: "dashed"  } },
        { matcher: /runSequence\(\s*\[([^;]+)\]\s*\)/g, styles: { color: "#ff9999", style: "dashed"  } }
    ],
    missingDependencyStyles: { fillcolor: "red" },
    graphStyles: { rankdir:"LR", tooltip:" "}
}