与一饮而尽

生成的文件，我已经得到了几个文件在我/src文件夹，名为在各个子文件setup.js的项目。我想要一个gulp任务将所有setup.js文件复制到/dist文件夹并保留子文件夹结构。这部分很简单。与一饮而尽

棘手的部分是我还想在\dist文件夹中的每个setup.js文件旁边生成一个index.html文件。 index.html文件将是所有的人都完全一样，除了它需要使用相对路径的该文件夹/dist引用setup.js脚本。我知道我可以使用一些像gulp-template动态呈现一个html文件，但我不知道如何将路径setup.js通过它。我不知道如何为每个setup.js创建一个index.html。

所以生成的文件夹结构，我要为会是这个样子

/src 
    template.html 
    /blah1 
     setup.js 
    /blah2 
     setup.js 
/dist 
    /blah1 
     setup.js 
     index.html 
    /blah2 
     setup.js 
     index.html

上我将如何做到这一点任何想法？

另外，如果有人可以链接我一些详细的文档/例子/上咕嘟咕嘟教程，这或许可以解释如何去domething这样的事情我将不胜感激。我还没有找到很多很好的文章来真正解释Gulp幕后的情况，并且很难找到超出简单的src | uglify | concat | dest用例的例子。

谢谢！

来源

2014-05-08 rob

也许这不是你想要的，但我有类似的任务，如你所说。我需要根据缩小的JS/CSS生成我的'index.html'的一部分。我所做的就是使用'jade'将'index.html'作为服务器端的动态页面，所以当用户请求它时可以进行相应的渲染。 –

不幸的是，我不能依赖任何服务器端渲染，因为我打算直接从JS Bin中提供这些文件，所以我没有任何服务器。谢谢你的想法。 – rob

我肯定就一饮而尽或节点没有专家，可以随意指正/添加到我的答案......

我试图复制一个类似的目录结构你描述这里的.. 。

用途gulp-tap和gulp-template

gulpfile.js

var gulp = require('gulp'); 
var template = require('gulp-template'); 
var tap = require('gulp-tap'); 

gulp.task('default', function() { 
    gulp.src('./src/**/**.js', { base: './src' }) 
    // tap into the stream to get the current file and compile 
    // the template according to that 
    .pipe(tap(function (file) { 
     gulp.src('./src/template.html') 
     // compile the template using the current 
     // file.path as the src attr in the template file 
     .pipe(template({ 
      sourcefile: file.path 
     })) 
     // not sure about this line but I'm sure it could be better 
     // splits the path on the/and then uses the second to last 
     // item in the split array (which is the current directory, minus src plus dist) 
     .pipe(gulp.dest('./dist/' + file.path.split('/')[file.path.split('/').length - 2])) 
    })) 
    // finally put the javascript files where they belong 
    .pipe(gulp.dest('./dist')) 
});

template.html

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <script src="<%- sourcefile %>"></script> 
</head> 
<body> 
</body> 
</html>

开始目录结构

. 
|____dist 
|____gulpfile.js 
|____src 
| |____bar 
| | |____setup.js 
| |____foo 
| | |____setup.js 
| |____template.html

最终目录结构

. 
|____dist 
| |____bar 
| | |____setup.js 
| | |____template.html 
| |____foo 
| | |____setup.js 
| | |____template.html 
|____gulpfile.js 
|____src 
| |____bar 
| | |____setup.js 
| |____foo 
| | |____setup.js 
| |____template.html

来源

2014-05-08 14:55:52 brbcoding

不知道吞噬水龙头。这看起来正是我所需要的。谢谢！ – rob

我没看到@ brbcoding的解决方案，因此我最终来了采用这种解决方案。我想我喜欢他的点击更多的使用：

var gulp = require('gulp'); 
var through = require('through2'); 
var fs = require('fs'); 
var path = require("path"); 
var lodash = require('lodash'); 


var replaceWithFile = function(filePath, outName) { 
    return through.obj(function(file, encoding, callback) { 
     var gulpContext = this; 

     fs.readFile(filePath, 'utf8', function(err,data) { 
      file.contents = new Buffer(data); 
      file.path = path.join(path.dirname(file.path), outName); 

      gulpContext.push(file); 
      callback(); 
     }); 
    }); 
}; 

var template = function(data, options) { 
    return through.obj(function(file, encoding, callback) { 
     var resolvedData = {}; 

     for (key in data) { 
      if(typeof data[key] === 'function') { 
       resolvedData[key] = data[key](file); 
      } 
      else { 
       resolvedData[key] = data[key]; 
      } 
     } 

     file.contents = new Buffer(lodash.template(file.contents.toString(), resolvedData, options)); 
     this.push(file); 
     callback(); 
    }); 
}; 


gulp.task('test', function() { 
    gulp.src('src/**/setup.js') 
     .pipe(replaceWithFile('src/indexTemplate.html', 'index.html')) 
     .pipe(template({ 
      challengeFolder: function(file) { 
       return path.dirname(file.relative); 
      } 
     })) 
     .pipe(gulp.dest('out1')); 
});

来源

2014-05-08 15:16:27 rob

回答

相关问题