Question

我的setup.js文件夹中的各个子文件夹中有一个名为/src的文件。我喜欢gulp任务将所有setup.js文件复制到/dist文件夹并保留子文件夹结构。这部分很容易。

棘手的部分是我还想在setup.js文件夹中的每个\dist文件旁边生成一个index.html文件。 index.html文件对于所有这些文件将完全相同，只是它需要使用相对于setup.js文件夹的路径引用/dist脚本。我知道我可以使用像gulp-template这样的动态渲染html文件，但我不知道如何将setup.js传递给它。而且我不知道如何为每个index.html创建setup.js。

因此，我想要的结果文件夹结构看起来像这样

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

我对如何做到这一点有任何想法？

或者，如果有人可以将我链接到Gulp上的一些详细的文档/示例/教程，这些文档/示例/教程可能会解释如何进行类似这样的事情，我将非常感激。我还没有找到很多好的文章，这些文章实际上解释了Gulp幕后发生的事情，而且很难找到超出琐碎src | uglify | concat | dest用例的例子。

谢谢！

Answer 1

我当然不是gulp或node的专家，所以请随时纠正我/加我答案...

我试图将类似的目录结构复制到您在此处描述的内容......

使用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

Answer 2

我没有看到@ 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'));
});

用gulp生成文件

2 个答案: