16

私は多くの静的サイト ジェネレーターを使用してきましたが、gulp は非常にモジュール化されているため、より優れたアプローチです。静的サイト ジェネレーターの機能の一部を実行するプラグインがあるかどうか疑問に思っています。私の考えでは、不足しているのは、ディレクトリ内のファイルを、サイトのメニューで使用するための json データ構造に変換するものだけです。

4

3 に答える 3

20

.json 構造を生成し、それを Gulp を使用してファイルに追加することだけが必要な場合は、いくつかの方法のいずれかでこれを行うことができます。最初の 2 つは純粋な Gulp 手法を使用します。

  • throughまたはを使用してストリーム プラグインを作成できますthrough2。これは基本的に一度に 1 ファイルずつデータ構造を構築する必要があり、次に 2 番目の操作で最後にファイルを作成します (つまりpush()、またはqueue())。

  • ハイランドパイプラインを使用して.reduce()、ファイルをデータ構造に変換し.map()、結果をファイルに変換して、おそらく.merge()元のストリームで実行できます

どちらの場合も、生成された新しいvinylファイルに適切な.baseandが必要になりますが、作成しているファイルがまだ存在しないため、.pathプラグインは実際には認識しません。したがって、コードは偽の絶対パスを作成してgulp.dest()、正しい場所に配置する必要があります。

3 番目の手法は、代わりに次のような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 よりも優れた点があります。残念ながら、プラグインの書きやすさはその 1 つではありません。Gulp プラグインから新しいファイルを作成することは、正しいエラー処理と同様に、必要以上に困難です。また、ストリーミング アプローチと、ファイル間の操作を必要とする静的サイトの性質との間には、強いインピーダンスの不一致があります。

たとえば、作成後にすべての .html ページにメニューを埋め込みたい場合は、より複雑な Gulp プラグインが必要になります。これは、プラグインがすべてのファイルを「認識」するまでに、ファイルが「下流に移動」しているからです。そうしないと、それらに固執し、完了後に再度ストリーミングする必要があります。Metalsmith プラグインでは、メニューを生成した後に 2 番目のループを追加するだけで、ファイルに戻ってデータをインプレースで挿入できます。何もしていないファイルを渡すために何もする必要はありません。

この種のタスクでは、Metalsmith プラグイン API が Gulp よりも明らかに優れています。ただし、ストリーミングされたファイルだけで機能するタスクの場合は、既存の Gulp プラグインを使用してください。

基本的に、Metalsmith は静的サイト ジェネレーターの Gulp であり、Gulp はストリーミング ビルド システムの Gulp です。そして、Gulpsmith を使用して、両方の長所を組み合わせることができます。

(ちなみに、実際のタスクによっては、すべてまたは一部を実行する既存の Metalsmith プラグインがいくつかある場合があります。たとえば、metalsmith-collectionsプラグインは特定のパターンに一致するファイルのインデックスを作成しますmetalsmith-title。HTML ヘッダーをタイトル プロパティに抽出する があります。等。）

于 2014-05-25T18:57:49.437 に答える
3

私はそのようなプラグインを書いてきました、それはここにありますgulp-static-site. 他の 2 つの回答を見ると、その機能はバニラ gulpとgulpsmith.

Gulp-filetree

実際、主な機能は、 によって行われるツリー状のデータ構造の計算ですgulp-filetree。ストリームが終了するまで、段階的にツリーを構築します。次に、各ファイル (vinyl オブジェクト) が.treeプロパティと共に再送信されます。

tree.jsそのデータ構造に関する詳細情報を取得するには、 を参照してください。

Gulp-static-site

このプラグインは、HTML ファイルのストリームを取得gulp-filetreeし、ディレクトリ ツリー メニューとファイルの内容を含む基本的なレイアウトを追加する jade テンプレートを介してそれらを送信します。

主なパイプラインについては、こちらをご覧ください。 https: /おそらく同じ議論が他のものにも当てはまります...）

Q: これは とどのように関係していgulpsmithますか?

Gulpsmith は確かに強力で完全なように見えます。これを最初にコーディングしたときにそれについて知っていれば、おそらくそれを使用するでしょう。

そうは言っても; このプラグインはシンプルで軽量で、コードベースが小さいです。それが何をするのかを理解し、好みに合わせて変更するのは簡単だと思います。プルリクエストは大歓迎です:-)

他に不明な点がある場合は、問題を報告するか、ここでお知らせください。

于 2014-06-26T12:21:49.547 に答える