最近、タスクはサイトを迅速に作成するだけでなく、非常に迅速に作成することでした。
そのため、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に投稿さ
れます。
エラー/コメントを修正し、後で時間が表示されたらコードを通常の形式に戻します。 私はどんなフィードバックも喜んでいます