是否有一些gulp插件可以让它执行静态站点生成器的功能？

Question

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

Answer 1

如果您只想生成.json结构并将其添加到Gulp文件中,您可以通过多种方式之一完成此操作.前两个使用纯Gulp技术:

• 您可以使用through或编写流插件through2,基本上必须一次建立一个文件的数据结构,然后在第二个操作中,最后创建(即push()或queue())文件

• 您可以使用Highland管道.reduce()将文件转换为数据结构,然后.map()将结果转换为文件,也可以.merge()使用原始流

在这两种情况下,你需要你产生了新的vinyl文件,有一个适当的.base和.path,你的插件实际上不会知道,由于文件正在创建不存在呢.因此,您的代码必须构成一个虚假的绝对路径,以便gulp.dest()将其放在正确的位置.

第三种技术是编写一个Metalsmith插件,它看起来像这样:

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管道相结合,可以使用Gulpsmith将其包装起来:

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

Gulp确实比Metalsmith具有一定的优势.遗憾的是,易于编写插件不是其中之一.从Gulp插件创建新文件比应该更难,正确的错误处理也是如此.流式方法与需要跨文件操作的静态站点的性质之间也存在强阻抗不匹配.

例如,如果你想在创建它之后在每个.html页面中嵌入你的菜单,你需要一个更复杂的Gulp插件,因为当你的插件"看到"所有文件时,它们会"走向下游",或者你必须坚持下去,然后在你完成之后再将它们流出来.在Metalsmith插件中,您只需在生成菜单后添加第二个循环,再次返回文件以就地插入数据.您没有必要做任何事情来传递您没有做任何事情的文件.

对于这些任务,Metalsmith插件API明显优于Gulp.但是对于可以单独使用流式文件的任务,请使用现有的Gulp插件来获胜.

基本上,Metalsmith实际上是静态站点生成器的Gulp,而Gulp是流式构建系统的Gulp.你可以使用Gulpsmith结合两者的优势.

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