希望使用咕嘟咕嘟創建的獨立的HTML文件

Question

基本上我正在尋找一個咕嘟咕嘟插件個別分佈把一個目錄是這樣的：

/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 

關於如何完成這樣的構建系統的任何想法？

Answer 1

該代碼允許將common文件添加到每個頁面分佈以及定義爲pages對象中的數組的獨特依賴項。

以下咕嘟咕嘟文件依賴於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']);