node.js - Looking to use Gulp to create individual distributions of standalone HTML files -

basically i'm looking gulp plugin turn directory this:

/app      - htmlfile1.html      - htmlfile2.html      - htmlfile3.html      - /css           -cssmain.css      -/js           -global.js 

and turn this:

/dist      -/htmlfile1           - htmlfile1.html           - /css                -cssmain.css           -/js                -global.js      - /htmlfile2           - htmlfile2.html           - /css                -cssmain.css           -/js                -global.js      - /htmlfile3           - htmlfile3.html           - /css                -cssmain.css           -/js                -global.js 

any thoughts on how accomplish build system this?

the code allows common files added every page distribution unique dependencies defined array in pages object.

the following gulp file relies on gulp-foreach, parse-filepath, , event-stream: npm install gulp gulp-foreach parse-filepath event-stream --save-dev

gulpfile.js:

// command: // npm install gulp gulp-foreach parse-filepath event-stream --save-dev  // include gulp var gulp = require('gulp');  var foreach = require('gulp-foreach'); // https://www.npmjs.org/package/gulp-foreach var parsepath = require('parse-filepath'); // https://www.npmjs.org/package/parse-filepath var es = require('event-stream'); // https://www.npmjs.org/package/event-stream  // pages each make distribution // unique dependencies defined array value each page. var pages = {     './app/htmlfile1.html': [         './app/images/1.png',         './app/images/1-another.png',     ],     './app/htmlfile2.html': [],     './app/htmlfile3.html': [] };  // files added each page distribution var common = [     './app/css/cssmain.css',     './app/js/global.js', ];  function makedistributionstream(page) {     var gulpstream = gulp.src(page)         .pipe(foreach(function(stream, file) {             var pathparts = parsepath(file.path);             // assemble distribution path             var destinationpath = './dist/' + pathparts.name + '/';              // pipe html distribution folder             stream.pipe(gulp.dest(destinationpath));              // move of unique , common files distibution             var uniquedependencies = pages[page];             // merge common files unique ones             var distfiles = uniquedependencies.concat(common);             gulp.src(distfiles, {base: './app/'})                 .pipe(gulp.dest(destinationpath));         }));      return gulpstream; }  // assemble distribution directories each page gulp.task('make-distributions', function() {     var mergedstream = null;     for(var page in pages)     {         var stream = makedistributionstream(page);          // merge streams, if there 1         if(mergedstream)         {             mergedstream = es.merge(mergedstream, stream);         }         // otherwise, make 1         else         {             mergedstream = stream;         }     }      return mergedstream; });  // rerun task when file changes gulp.task('watch', function() {     // if html pages change, re-make distributions     gulp.watch(object.keys(pages), ['make-distributions']); });  // default task gulp.task('default', ['make-distributions', 'watch']);