Prototype Gulp Setup

gulpfile.js

'use strict';

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    jscs = require('gulp-jscs'),
    jshint = require('gulp-jshint'),
    tslint = require('gulp-tslint'),
    typedoc = require('gulp-typedoc'),
    react = require('gulp-react'),
    typescript = require('gulp-tsc'),
    watch = require('gulp-watch'),
    plumber = require('gulp-plumber'),
    livereload = require('gulp-livereload'),
    //livereloadEmbed = require('gulp-embedlr'),

    openbrowser = require('open'),
    lazypipe = require('lazypipe'),
    lrServer = require('tiny-lr')(),

    config = {
        app: {
            js: [ './src/*.js' ],
            ts: [ './src/*.ts' ],
            jsx: [ './src/*.jsx' ]
        },
        build: {
            js: './build/js'
        },
        lr: {
            port: 7000,
            embed: false
        },
        server: {
            port: 8080,
            dir: './build'
        }
    },

    onError = function(err) {
        gutil.beep();
        gutil.log(gutil.colors.underline(gutil.colors.red('ERROR:')) +
            ' ' + gutil.colors.cyan(err.plugin) + ' - ' + err.message);
    },
    plumberDefault = lazypipe()
        .pipe(plumber, { errorHandler: onError }),

    jsFiles = function() {
        return gulp.src(config.app.js);
    },
    jshintTask = lazypipe()
        .pipe(jshint)
        .pipe(jshint.reporter, 'jshint-stylish'),
    jscsTask = lazypipe()
        .pipe(jscs),
    jslintTask = lazypipe()
        .pipe(jshintTask)
        .pipe(jscsTask),
    jscompileTask = lazypipe()
        .pipe(jslintTask)
        .pipe(gulp.dest, config.build.js),

    tsFiles = function() {
        return gulp.src(config.app.ts);
    },
    tslintTask = lazypipe()
        .pipe(tslint)
        .pipe(tslint.report, 'verbose'),
    tscompileTask = lazypipe()
        .pipe(tslintTask)
        .pipe(typescript)
        .pipe(gulp.dest, config.build.js),

    jsxFiles = function() {
        return gulp.src(config.app.jsx);
    },
    //jsxlintTask = lazypipe()    //TODO: Gulp Linter does not yet exist
    //    .pipe(jsxlint),
    jsxcompileTask = lazypipe()
        //.pipe(jsxlintTask)      //TODO: Gulp Linter does not yet exist
        .pipe(react)
        .pipe(gulp.dest, config.build.js);

gulp.task('jshint', function() {
    return jsFiles().pipe(jshintTask());
});
gulp.task('jscs', function() {
    return jsFiles().pipe(jscsTask());
});
gulp.task('jslint', function() {
    return jsFiles().pipe(jslintTask());
});
gulp.task('tslint', function() {
    return tsFiles().pipe(tslintTask());
});
gulp.task('jsxlint', function() {
    //TODO: No gulp task for this yet
});
gulp.task('lint', [ 'jslint', 'jsxlint', 'tslint' ]);

gulp.task('jscompile', function() {
    return jsFiles().pipe(jscompileTask());
});
gulp.task('tscompile', function() {
    return tsFiles().pipe(tscompileTask());
});
gulp.task('jsxcompile', function() {
    return jsxFiles().pipe(jsxcompileTask());
});
gulp.task('compile', [ 'jscompile', 'jsxcompile', 'tscompile' ]);

gulp.task('build', [ 'compile' ], function() {
    //TODO: No gulp task for this yet
});

gulp.task('tsdocs', function() {
    return gulp
        .src(config.app.ts)
        .pipe(typedoc({
            module: 'commonjs',
            out: './docs',
            name: 'Glimpse Client',
            target: 'es5'
        }));
});

gulp.task('docs', [ 'tsdocs' ]);

gulp.task('watch', [ 'lrserver' ], function() {
    watch({ glob: config.app.js, emitOnGlob: false, name: 'JavaScript' })
        .pipe(plumberDefault())
        .pipe(jscompileTask())
        .pipe(livereload(lrServer));

    watch({ glob: config.app.ts, emitOnGlob: false, passThrough: false, name: 'TypeScript' }, function(files) {
        return files
            .pipe(plumberDefault())
            .pipe(tscompileTask())
            .pipe(livereload(lrServer));
    });

    watch({ glob: config.app.jsx, emitOnGlob: false, name: 'React' })
        .pipe(plumberDefault())
        .pipe(jsxcompileTask())
        .pipe(livereload(lrServer));
});

gulp.task('server', function() {
    var stat = require('node-static'),
        server = new stat.Server(config.server.dir),
        port = config.server.port;

    gutil.log('Starting Server');

    require('http').createServer(function(request, response) {
        request.addListener('end', function() {
            server.serve(request, response);
        }).resume();
    }).listen(port, function() {
        gutil.log('Started Server on port: ' + gutil.colors.red(port));
    });
});

gulp.task('lrserver', function() {
    config.lr.embed = true;

    gutil.log('Starting LiveReload Server');

    var port = config.lr.port;
    lrServer.listen(port, function() {
        gutil.log('Started LiveReload Server on port: ' + gutil.colors.red(port));
    });
});

gulp.task('dev', [ 'build', 'watch', 'server' ], function() {
    var port = config.server.port;

    gutil.log('Opening browser using port: ' + gutil.colors.red(port));
    openbrowser('http://localhost:' + port);
});

gulp.task('default', function() {
    //Not setup yet
});

The above is an attempt to get the most of Gulp's streams whilst still making this modula tasks which can be run individually.

For example, in the case pf jshint and jscs, both need to run on the same set of files. I want to be able jshint and jscs individually or together as a jslint.

Normally, this would be done by the below, but as far as I can tell it doesn't take advantage of streams by only reading the files from disk one:

gulp.task('jshint', function() {
    return gulp.src(config.app.js)
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'));
});
gulp.task('jscs', function() {
    return gulp.src(config.app.js)
        .pipe(jscs());
});
gulp.task('jslint', [ 'jscs', 'jshint' ]);

A naive attempt at fixing this would be the below but we are now repeating the things:

gulp.task('jshint', function() {
    return gulp.src(config.app.js)
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'));
});
gulp.task('jscs', function() {
    return gulp.src(config.app.js)
        .pipe(jscs());
});
gulp.task('jslint', function() {
    return gulp.src(config.app.js)
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'))
        .pipe(jscs());
});

Hence, in the approach I've got in the above gist, I'm aiming to use lazypipe to solve this problem.

If this approach is reasonable/sound, some of the boiler plate definition of tasks could abstracted away if the lazypipe "task definitions" are captured in a structure that can be iterated over and gulp tasks generated.