是否有某个gulp插件可以执行静态站点生成器的功能？

Question

我使用了一堆静态站点生成器，但是gulp是一种更好的方法，因为它是如此模块化。我想知道是否有一个插件可以执行静态站点生成器的一些功能。在我看来，所缺少的只是将目录中的文件转换为json数据结构，以便在站点上的菜单中使用。

Answer 1

如果您只想生成一个.json结构并使用Gulp将其添加到一个文件中，那么您可以通过几种方法之一来实现这一点。前两种使用纯杯技术：

• 您可以使用through或through2编写流插件，这基本上需要每次建立一个文件的数据结构，然后在第二个操作中，在最后创建一个文件(即push()或queue())。
• 您可以使用高地管道将文件放到数据结构中，然后将结果转换为文件，或者用原始流执行.merge()。

在这两种情况下，您都需要生成新的vinyl文件，以获得适当的.base和.path，而您的插件实际上并不知道这一点，因为您创建的文件还不存在。因此，您的代码必须构建一个虚假的绝对路径，以便gulp.dest()将其放置在正确的位置。

第三种技术是编写一个金属匠插件，如下所示：

function generate_json(files, smith, done) {
    var menu = {};
    Object.keys(files).forEach(function(path) {
        var file = files[path];
        if (path.slice(-5)===".html") {
            menu[path] = ... // whatever you want to store about `file`
        }
    });
    files["path/to/menu.json"] = { contents: new Buffer(JSON.stringify(menu)) };
    done();
}

虽然并不比其他方法所需的代码短得多，但要正确地执行它，您需要了解的代码要少得多。只需确保如果有错误，则调用done(err)以传递错误。

如果您想将这个插件与Gulp管道结合起来，您可以使用古尔普史密斯像这样包装它

gulp.src(...)
.pipe( things() )
.pipe( gulpsmith().use(generate_json) )
.pipe( other_stuff() )
.pipe( gulp.dest(...);

的确，古普比金属匠有一定的优势。遗憾的是，插件的易用性并不是其中之一。从Gulp插件中创建新文件比应该创建的文件要困难得多，正确的错误处理也是如此。流方法和静态站点的性质之间也有很强的阻抗不匹配，需要跨文件操作。

例如，如果您想在创建后将菜单嵌入到每个.html页面中，您将需要一个更复杂的Gulp插件，因为当您的插件“看到”所有文件时，它们将“下游”，否则您必须保存它们，然后在完成之后再将它们流出来。在Metalsmith插件中，您只需在生成菜单后添加第二个循环，然后再次遍历文件以就地插入数据。你不需要做任何事情来传递你没有做任何事情的文件。

对于这类任务，Metalsmith插件API无疑优于Gulp的，但是对于可以单独处理流文件的任务，使用现有的Gulp插件即可获胜。

基本上，Metalsmith实际上是静态站点生成器的Gulp，而Gulp是流构建系统的Gulp。你可以结合两者的优点，使用古尔普史密斯。

(顺便说一句，根据您的实际任务，您可能会发现一些现有的Metalsmith插件完成了全部或部分工作。例如，metalsmith-collections插件为与某些模式匹配的文件创建索引，有一个metalsmith-title可以提取标题属性的header，等等。

Answer 2

是的，你可以在吞咽中进行静态生成。

你可能需要比你想象的更少的插件。数数可能会降到零。

考虑一下你能做些什么而不用插件：

var gulp = require('gulp'),
    browserify = require('browserify');

gulp.task('browserify', function(callback) {
    browserify('app.js').bundle()
        .pipe(fs.createWriteStream('dist/app.js')
        .on('close', callback); // why? read on...
});

太多的吞咽插件不需要存在。它们将一些原始模块应用于gulp.src和gulp.dest之间使用的乙烯基对象流，但乙烯基对象流并不是强制性的。

需要模块X为您做一部分静态生成吗？将callback作为参数传递给任务函数，并将其与参数一起传递给X。通常情况下，它是一条直线:插件require-ing只会使您的代码更长。

即使对于工作流中最好描述为“读取所有内容，在内存中处理它，并编写它一次”的部分，您也可以使用through2.obj来转换乙烯基对象，或者使用吞咽式过滤器来删除它们。吞食插件(或者更糟的是，通过吞咽工的金属匠插件)是最后的手段。

var gulp = require('gulp'),
    filter = require('gulp-filter'),
    through2 = require('through2');

gulp.task('generate-assets', function() {
    return gulp.src('path/to/your/content/and/templates/**')
               .pipe(filter(shouldFileSurvive))
               .pipe(through2.obj(makeFileDifferent))
               .pipe(gulp.dest('dist/'));
});

注意:如果没有回拨，则必须返回最终pipe的结果。否则，gulp会认为您的任务是同步的，而不是在开始依赖任务之前等待。

如果最终管道返回一个正常流，而不是gulp.dest，则进行回调(参见第一个示例)，直到b59182c7着陆为止。

Answer 3

我一直在写这样一个插件，它在这里，gulp-static-site。看看另外两个答案，我会说它的功能介于香草杯和gulpsmith之间。

Gulp-filetree

主要的功能确实是计算类似树的数据结构，这是由gulp-filetree完成的。它会逐步建立一棵树，直到流结束。然后使用.tree属性重新发出每个文件(乙烯基对象)。

看看tree.js，了解更多关于该数据结构的信息。

Gulp-static-site

这个插件接受一个HTML文件流，通过gulp-filetree将它们发送到一个玉模板中，该模板添加了一个目录树菜单和文件内容的基本布局。

在这里找主管道。https://github.com/0x01/gulp-static-site/blob/master/index.js#L146 (如您所见，这不是最漂亮的，但也不错。)标记转换必须删除，因为它可以在插件外的吞咽。也许同样的论点也适用于其他事情.)

问:这与gulpsmith**?** 有何关系？

Gulpsmith看起来绝对是强大和完整的，我可能会使用它，如果我知道它在我最初编码的时候。

也就是说，这个插件很简单，很轻量级，并且有一个很小的代码库。我认为很容易理解它做了什么，并根据你的喜好改变，拉请求当然欢迎：)

如果还有什么不清楚的地方，请提出问题或让我知道，谢谢。