そのため、gulp-projectを展開し（今日まで私はその支援に頼ることはありませんでした）、コーディングに直接集中することが決定されました。 残念ながら、これでは十分ではありませんでした。
レイアウトプロセス中に、各行のhtmlおよびjsコードの巨大なキャンバスがますますレイアウトプロセスを遅くすることが明らかになりました。 正直に言うと、この問題は以前にも発生しましたが、今日では特に深刻になっています。
そのため、すでに構成されているブロックを適切な場所に接続して、ソース内のコードのサイズを削減できるソリューションを見つける必要がありました。
インターネットで大騒ぎして、gulp -riggerプラグインを見つけました。 これは必要なものではないことを理解するには30分で十分です。
- まず、奇妙なファイル名の処理。 なんらかの理由で、 .htmlファイル（まったくそのようなもの）では機能しません。他にも制限があるかもしれません-私はそれを研究していません。
- 第二に（そして最も重要なこと）、再帰的に動作する方法がわからないこと-既に別のファイルに接続しているファイルをこの方法で接続しようとすると、エラーが発生します。
彼は私の問題を解決できないことが明らかになりました。
したがって、必要な最小値が調査され、gulpの独自のプラグインgulp-pagebuilderが作成されました 。
彼は上記のリガーの問題を解決します。 使用はできるだけ簡単です。 src htmlソースを含むディレクトリがあり、ファイルがビルドで収集されているとしましょう
gulpのタスクは次のようになります。
var gulp = require('gulp'), pagebuilder = require('gulp-pagebuilder')); gulp.task('default', function () { return gulp.src('src/*.html') .pipe(pagebuilder('src')) .pipe(gulp.dest('build/')); });
pagebuilder（ 'src'） -ここでは、ソースを含むディレクトリを渡します。これに関して、接続されたファイルが検索されます
ソースファイルに別のファイルを含めます。
<div class="someclass" > [snp tpl="some/block/in/src/somefile.html" class="foo bar" tag="sometag" content="bla bla bla" ] </div>
さらに、プラグインスニペットで転送および使用できるパラメーター（略語[snp ...]）は、クラス、タグなど、まったく何でもかまいません。 主なことは、tplが既存のファイルを指すことです。そうしないと、何も接続されません。
インクルードファイルは次のようになります
<div class="otherclass {class}" data-tag="{tag}" > Some content, {content} </div>
アセンブリが成功した場合、結果のファイルは次のようになります。
<div class="someclass" data-tag="sometag" > <div class="otherclass foo bar" > Some content, bla bla bla </div> </div>
プラグインは任意のテキスト形式で動作します。jsを含めることもできます
プラグインはnpmで利用でき、コードはgithubに投稿されます。
エラー/コメントを修正し、後で時間が表示されたらコードを通常の形式に戻します。 私はどんなフィードバックも喜んでいます