2

ミドルウェアを備えたnode.jsアプリがあります。express静的ページはjadeテンプレート エンジンを使用して作成され、リクエストに応じてレンダリングされます。res.render("template-name.jade");

SASSとJavaScriptファイルは縮小され、それぞれ/build/jsと の/build/cssフォルダーに配置されます。

また、各ファイルで使用gulpするとgulp-rev、その名前に関連付けられたリビジョン文字列が作成され、マニフェスト ファイルが作成されます。次のタスク コードは、javascript ファイルに使用されます。

gulp.task( "prepare_js", function() {
    gulp.src( "./js/*.js" )
    .pipe( annotate() )
    .pipe( gulp_if( isDev, uglify() ) )
    .pipe( rev() )
    .pipe( gulp.dest('build/js') )  // write rev'd assets to build dir
    .pipe( rev.manifest() )
    .pipe( gulp.dest('build/js') ) // write manifest to build dir
    .pipe( gulp.dest( "./build/js") )
});

タスクは次のようなマニジェスト ファイルを生成します。

{
    "index.js": "index-d41d8cd9.js"
}

同様のタスクは、sass を css にコンパイルするためのものです。

問題は、(そのタスクまたは別のタスクとして) 適切に使用gulp-injectして、すべての .jade ファイルで定義されたアセットのみを見つけて置換する方法です。

それを解決する方法は2つあります。

アプローチ1

毎回同じ jade テンプレートを使用し、各 .jade ファイルで、どのファイル (オリジナルに基づいて、リビジョン文字列が添付されていない、ファイル名) を挿入する必要があるかをどうにかして定義します。次に、前のタスクの実行から残された行を検索し、新しいリビジョン文字列を持つ新しい行に置き換えます。

たとえば、2 つのファイルがあるとします。それらのそれぞれは、共通のアセットだけでなく、いくつかの特定のアセットを使用する場合があります。

// index.jade
script(src="/js/index-xxxxxx.js", type="text/javascript")
script(src="/js/more-js-xxxxxx.js", type="text/javascript")
link(rel="stylesheet", href="/css/index-xxxxxx.css")


// product.jade
script(src="/js/index-xxxxxx.js", type="text/javascript") // <-- here we use index-xxxxxx.js also 
link(rel="stylesheet", href="/css/file1-xxxxxx.css")
link(rel="stylesheet", href="/css/file2-xxxxxx.css")

ここで、xxxxxxが以前の gulp タスクから残されたリビジョン文字列を定義していると仮定しましょう。私たちの場合、上記のファイルを変更して、次のような挿入用のコメントを追加できます。

// index.jade
<!-- index.js -->
script(src="/js/index-xxxxxx.js", type="text/javascript")
<!-- one-more-js-file.js -->
script(src="/js/one-more-js-file-xxxxxx.js", type="text/javascript")
<!-- styles.css -->
link(rel="stylesheet", href="/css/styles-xxxxxx.css")
<!-- endinject -->


// product.jade
<!-- product.js -->
script(src="/js/index-xxxxxx.js", type="text/javascript")
<!-- file1.css -->
link(rel="stylesheet", href="/css/file1-xxxxxx.css")
<!-- file2.css -->
link(rel="stylesheet", href="/css/file2-xxxxxx.css")
<!-- endinject -->

これにより、特定の行を新しいリビジョン文字列のファイルを含む新しい行に変更する必要があることが gulp-inject に通知されます。

アプローチ 2

2 つのテンプレート フォルダーがあり、1 つはすべてのテンプレート ソースを含み、もう 1 つは注入タスクを実行した後のテンプレートを含みます。Express アプリは、静的データを取得する場所としてフォルダー 2 をポイントします。

最初のフォルダーの下のすべてのテンプレートで、次のように、どのファイルを挿入するかについてコメントを追加するだけです。

// index.jade
<!-- index.js -->
<!-- one-more-js-file.js -->
<!-- styles.css -->
<!-- endinject -->


// product.jade
<!-- index.js -->
<!-- file1.css -->
<!-- file2.css -->
<!-- endinject -->

ここで正しい解決策は何でしょうか? また、gulp タスクを記述/変更して、リビジョン文字列を持つアセットを適切に挿入する方法 (生成されたマニフェスト ファイルに基づいて、または何らかの形でそれなしで) は?

ありがとうございました。

4

1 に答える 1