使用Gulp生成文件

Question

使用Gulp生成文件

6

我有一个项目，其中有几个名为 setup.js 的文件，分别位于我的 /src 文件夹的不同子文件夹中。我想要一个 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

你有任何想法如何实现这个吗？

或者，如果有人能够为我提供有关Gulp的详细文档/示例/教程，以解释如何完成类似此类操作，我将不胜感激。我没有找到许多好的文章来解释Gulp背后发生了什么，很难找到超越 trivial src | uglify | concat | dest 的用例。

谢谢！

- rob

也许这并不是你想要的，但我有一个类似于你提到的任务。我需要根据压缩后的JS/CSS生成我的index.html的一部分。我的做法是使用jade将index.html制作成服务器端动态页面，这样当用户请求时可以相应地呈现。 - Shaun Xu

不幸的是，我不能依赖于任何服务器端渲染，因为我计划直接从JS Bin中提供这些文件，所以我没有任何服务器。不过还是谢谢你的建议。 - rob

2个回答

1

我没有看到 @brbcoding 的解决方案，所以我想出了这个解决方案。不过我认为他使用 tap 更好:

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'));
});

- rob

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- brbcoding · Accepted Answer

我对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'))
});

模板文件.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