問題タブ [gulp-inject]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
gulp - gulpを使用してメインバウアーファイルをワンステップでコピーして挿入する方法は?
アプリをデプロイするときに、bower の依存関係をdeployディレクトリにコピーし、これらのファイルへのリンクをディレクトリにもある に挿入しindex.htmlますdeploy。
各ステップだけでも完全に機能しますが、それらを組み合わせることができません。
ファイルをコピーします。
ファイルの挿入:
依存ファイルの正しい順序を維持するには、これを 1 つのステップで実行する必要があると思います。
この組み合わせを試してみましたが、うまくいきませんでした。
javascript - Gulp で特定の Bower コンポーネントを IE8 条件付きブロックとして追加する方法
私はいくつかのbowerコンポーネントを持っていますが、そのうちのようないくつかのコンポーネントをjson3IE8条件付きブロックに追加する必要があります(ビルドとサーブrespondjs)es5shim
<!--[if lt IE 9]>
<script src="bower_components/json3/json3.js"></script>
<![endif]-->
タスクの書き方は？この問題gulp-injectだけでなく、適切な例も見つかりませんでした。wiredepお知らせ下さい
gulp - Gulp-Inject の位置
Jsファイルをdiffに挿入したい場合。場所<head> hereなどhere </body>。インジェクションについては、ここで説明されているような名前を設定する必要があります:
https://github.com/klei/gulp-inject#method-2-use-gulp-injects-name-option
各ファイルに名前を付ける必要がないように、このセレクターを変更するにはどうすればよいですか。たとえば、*_important.js を含むすべてのファイルを取得します。
そして、より良い方法はありますか。たとえば、s.th を追加するようなものです。javascript ファイル内に挿入するか、orderModule.above.js、googleAnalytics.below.js のように名前を付けます。
gulp - gulp を使用して bower の依存関係を注入する - 相対パスの問題
gulp-injectと でバウアーの依存関係を注入したいと思いmain-bower-filesます。依存関係は取得されますが、生成されるパスは絶対です。
私/www/lib/angular/angular.jsは欲しいのに得るlib/angular/angular.js
.bowerrc
gulpfile.js
angularjs - gulp-inject がすべての bower コンポーネントをロードしない
アプリを足場にするために、yeoman generator-gulp-angular を使用しています。bower で ng-18next をインストールしたところ、パッケージとその依存関係が両方とも bower_components ディレクトリに正しくインストールされました。ただし、gulp serve を実行してソースを表示すると、コンポーネントがページに挿入されていないため、モジュールのインスタンス化エラーが発生します。deps をページにハードコーディングしても、エラーは発生しません。また、bower install --save を試してみましたが、deps が bower.json ファイルに正しく挿入されています。何か案は？
ありがとう。
javascript - Gulp が正しく動作していません
私はこのタスクを持っています:
html:
- .jade を .html に変換する
- bower リソース (css、js、およびフォント) を /dest/vendor フォルダーにコピーします。
- bower リソースを .html に追加 (スクリプトおよびリンク タグ)
- js (/dest/js から) と css (/dest/css から) を .html に追加します (前のように)。
建てる
- /dest フォルダーを消去する
- 私の js を /dest/js にコピーします (コピーするだけで、プロセスはありません)
- less ファイルを処理し、css として /dest/css に移動します
実行してから実行するgulp buildとgulp html、すべて正常に動作します。ただし、htmlビルドの最後の部分として追加すると、それ以上機能しません。Jade は .html ファイルに変換され、すべてのリソース (my および bower) が /dest フォルダーにコピーされますが、wiredepand inject(スクリプトおよびリンク タグを追加する) は何も表示されません。
これは私のタスク (の一部) です: https://gist.github.com/Falci/f52d4144318c9d5e4c2f
node.js - gulp-inject を使用して改訂されたアセットを jade テンプレートに適切に注入する方法は?
ミドルウェアを備えたnode.jsアプリがあります。express静的ページはjadeテンプレート エンジンを使用して作成され、リクエストに応じてレンダリングされます。res.render("template-name.jade");
SASSとJavaScriptファイルは縮小され、それぞれ/build/jsと の/build/cssフォルダーに配置されます。
また、各ファイルで使用gulpするとgulp-rev、その名前に関連付けられたリビジョン文字列が作成され、マニフェスト ファイルが作成されます。次のタスク コードは、javascript ファイルに使用されます。
タスクは次のようなマニジェスト ファイルを生成します。
同様のタスクは、sass を css にコンパイルするためのものです。
問題は、(そのタスクまたは別のタスクとして) 適切に使用gulp-injectして、すべての .jade ファイルで定義されたアセットのみを見つけて置換する方法です。
それを解決する方法は2つあります。
アプローチ1
毎回同じ jade テンプレートを使用し、各 .jade ファイルで、どのファイル (オリジナルに基づいて、リビジョン文字列が添付されていない、ファイル名) を挿入する必要があるかをどうにかして定義します。次に、前のタスクの実行から残された行を検索し、新しいリビジョン文字列を持つ新しい行に置き換えます。
たとえば、2 つのファイルがあるとします。それらのそれぞれは、共通のアセットだけでなく、いくつかの特定のアセットを使用する場合があります。
ここで、xxxxxxが以前の gulp タスクから残されたリビジョン文字列を定義していると仮定しましょう。私たちの場合、上記のファイルを変更して、次のような挿入用のコメントを追加できます。
これにより、特定の行を新しいリビジョン文字列のファイルを含む新しい行に変更する必要があることが gulp-inject に通知されます。
アプローチ 2
2 つのテンプレート フォルダーがあり、1 つはすべてのテンプレート ソースを含み、もう 1 つは注入タスクを実行した後のテンプレートを含みます。Express アプリは、静的データを取得する場所としてフォルダー 2 をポイントします。
最初のフォルダーの下のすべてのテンプレートで、次のように、どのファイルを挿入するかについてコメントを追加するだけです。
ここで正しい解決策は何でしょうか? また、gulp タスクを記述/変更して、リビジョン文字列を持つアセットを適切に挿入する方法 (生成されたマニフェスト ファイルに基づいて、または何らかの形でそれなしで) は?
ありがとうございました。
javascript - 「gulp-translate-html」および「gulp-inject」を使用する場合の Gulp パイプおよびキャッシングの問題
翻訳された静的ページを生成する必要があるプロジェクトがあります。リソースの最小化、ファイルの変更の監視と再コンパイル、およびいくつかのページに html テンプレートを挿入するのに非常に役立つため、gulp を使用することを選択しました。
私が使用したもの:
- 'gulp-inject': テンプレートを最終ファイルに挿入するため
- 'gulp-translate-html': '.json' 辞書があるため翻訳するため
だから私は2つの問題があります：
- 「gulp-translate-html」
これは、次のコードを使用して、json を翻訳の入力として使用します。
「.json」ファイルにウォッチを作成しました。変更すると、翻訳が再適用されます。しかし、どういうわけか、変更されたファイルではなく古いファイルが使用されます。これに対する回避策はありますか? または、json ファイルに使用できる他のプラグインはありますか?
'gulp-inject' 上記のコード サンプルでは、1 つのファイルのみを翻訳しました。しかし、目的地が異なるいくつかの言語に対してはそうする必要があるため、言語に対してループを使用しました (コードのインデントについては申し訳ありません)。
/li>
ここでは、'injectContent' タスクを 'translation' タスクの前に実行したいのですが、後者の実行が早すぎます。これは、「injectContent」に特定の return gulp コールバックがないために発生しますよね?
結果をマージして、タスクがインターカレートしないようにするにはどうすればよいですか?
html - Gulp を使用して html タグを変更する
ビルド プロセスで Gulp を使用していますが、うまく機能します。次の構文を使用して、gulp-inject を使用して CSS ファイルと JS ファイルを index.html に挿入します。
html タグに属性を挿入する方法はありますか? 私たちの開発環境では、
本番環境では、マニフェスト タグを追加して、appcache ファイルを指すようにします。