[解決済み] Gulpでスクリプトを順番に連結する
2022-04-19 03:18:47
質問
例えば、Backboneなどでプロジェクトを構築しているときに、スクリプトを特定の順番で読み込む必要があるとします。
underscore.js
の前に読み込む必要があります。
backbone.js
.
スクリプトを順番に連結するにはどうしたらいいのでしょうか?
// JS concat, strip debugging and minify
gulp.task('scripts', function() {
gulp.src(['./source/js/*.js', './source/js/**/*.js'])
.pipe(concat('script.js'))
.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest('./build/js/'));
});
のスクリプトの順番は正しいのですが。
source/index.html
しかし、ファイルはアルファベット順で整理されているので、gulp は
underscore.js
の後に
backbone.js
のスクリプトの順番を変更しました。
source/index.html
は関係なく、ディレクトリ内のファイルを参照します。
そこで、どなたかお分かりになる方はいらっしゃいますか?
私が持っている最良のアイデアは、ベンダースクリプトの名前を
1
,
2
,
3
のように、適切な順序を与えることができますが、私はこれが好きかどうかわかりません。
もっと勉強すると、Browserifyは素晴らしいソリューションだとわかりました。最初は面倒ですが、素晴らしいです。
解決するには?
最近、AngularJSアプリを構築する際に、Gruntで同じような問題が発生しました。以下は 質問 投稿しました。
結局どうしたかというと、gruntのconfigで明示的にファイルを順番に並べることにしました。すると、コンフィグファイルは以下のようになります。
[
'/path/to/app.js',
'/path/to/mymodule/mymodule.js',
'/path/to/mymodule/mymodule/*.js'
]
Gruntはどのファイルが重複しているかを把握し、それらをインクルードしないようにすることができます。Gulpでも同じ手法が使えます。
関連
-
jsを使った簡単な照明スイッチのコード
-
元のイベントが実行されなかった後に要素を追加するためのjQueryソリューション
-
vue+webrtc(Tencent cloud)ライブ機能の実践を実現するために
-
[解決済み】GETできない / Nodejsエラー
-
JavaScriptのStringに関する共通メソッド
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryで要素にスクロールする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
JSアレイループと効率解析の比較
-
Javascript Bootstrapのグリッドシステム、ナビゲーションバー、ローテーションの説明
-
vueディレクティブv-bindの使用と注意点
-
vueにおけるv-forループオブジェクトのプロパティ
-
[解決済み】"フォームが接続されていないため、フォームの送信がキャンセルされました "というエラーの取得について
-
[解決済み】Node.jsで "Cannot find module "エラーを解決するには?
-
[解決済み】ERROR エラーです。スイッチのname属性が指定されていないフォームコントロールの値アクセッサがない
-
[解決済み】リクエストに失敗していないのに、「TypeError: failed to fetch」が表示される。
-
フロントエンド非同期(アシンク)ソリューション(全ソリューション)