希望使用Gulp来创build独立的HTML文件的个人分布
基本上我正在寻找一个Gulp插件来打开这样一个目录：
/app - htmlfile1.html - htmlfile2.html - htmlfile3.html - /css -cssmain.css -/js -global.js 把它变成这样：
/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
有关如何完成这样的构build系统的任何想法？
该代码允许将common文件添加到每个页面分配以及在pages对象中定义为数组的唯一依赖项。
以下Gulp文件依赖于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 // The pages that each make a distribution // Unique dependencies are defined as an array value for each page. var pages = { './app/htmlfile1.html': [ './app/images/1.png', './app/images/1-another.png', ], './app/htmlfile2.html': [], './app/htmlfile3.html': [] }; // Files added to 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 the distribution path var destinationPath = './dist/' + pathParts.name + '/'; // Pipe the html into the distribution folder stream.pipe(gulp.dest(destinationPath)); // Move all of the unique and common files into the distibution var uniqueDependencies = pages[page]; // Merge the common files to the unique ones var distFiles = uniqueDependencies.concat(common); gulp.src(distFiles, {base: './app/'}) .pipe(gulp.dest(destinationPath)); })); return gulpStream; } // Assemble the distribution directories for each page gulp.task('make-distributions', function() { var mergedStream = null; for(var page in pages) { var stream = makeDistributionStream(page); // Merge the streams, if there is already one if(mergedStream) { mergedStream = es.merge(mergedStream, stream); } // Otherwise, just make it this one else { mergedStream = stream; } } return mergedStream; }); // Rerun the task when a file changes gulp.task('watch', function() { // If the html pages change, re-make the distributions gulp.watch(Object.keys(pages), ['make-distributions']); }); // Default Task gulp.task('default', ['make-distributions', 'watch']);