component.js

var del = require('del'),
    gulp = require('gulp'),
    rev = require('gulp-rev'),
    rename = require('gulp-rename')
    template = require('gulp-template'),
    concatCss = require('gulp-concat-css'),
    minifyCss = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    concatJs = require('gulp-concat'),
    revDel = require('./revDel');

function buildComponent(source, targetPath) {
    
    if (targetPath.search('style.css') != -1) {
        
        return buildStyleComponent('./resources/components/' + targetPath, targetPath.replace('/', '_'));
        
    } else if (targetPath.search('script.js') != -1) {
        
        return buildScriptComponent('./resources/components/' + targetPath, targetPath.replace('/', '_'));
        
    }
    
}

function buildStyleComponent(source, outputName) {
    
    var res = gulp.src([source])
            .pipe(concatCss(outputName)) // concatenate
            .pipe(gulp.dest('./public/build'))
            .pipe(minifyCss()) // minify
            .pipe(gulp.dest('./public/build'))
            .pipe(rev())    // apply versioning
            .pipe(gulp.dest('./public/build'))
            .pipe(rev.manifest({
                merge: true
            })) // store version hash
            .pipe(gulp.dest('.'));
    
    console.log(outputName + " build");
    
    revDel(outputName);
    
    return res;
    
}

function buildScriptComponent(source, outputName) {
    
    var res = gulp.src([source])
            .pipe(concatJs(outputName))
            .pipe(uglify())
            .pipe(gulp.dest('./public/build'))
            .pipe(rev())
            .pipe(gulp.dest('./public/build'))
            .pipe(rev.manifest({
                merge: true
            })) // store version hash
            .pipe(gulp.dest('.'));
    
    console.log(outputName + " build");
    
    revDel(outputName);
    
    return res;
}

gulp.task('component', function() {
    
    gulp.watch(['./resources/components/**/*'], function(event) {
        
        /**
         * 
         * Example, if event.path is
         * 
         * ./resources/components/challengewizard/script.js
         * 
         * then, we convert the above string to this:
         * 
         * challengewizard/script.js
         * 
         * Once we have that, we can build the changed script
         * to:
         * 
         * ./public/build/components/challengewizard/script.js
         * 
         * And ofcourse apply cache busting.
         * 
         */
        
        var componentBasePath = event.path.split('components/').pop();
        var sourceBasePath = './resources' + componentBasePath;
        
        return buildComponent(sourceBasePath, componentBasePath);
    });
    
})