問題タブ [web-frontend]

Grunt で開発および管理しているフロントエンド アセットを含む Web アプリがあります。その組織の大まかな考えは次のとおりです。

そのため、grunt watch を実行してファイルを追跡し、grunt-copy を使用して、結果のファイルをサーバーが提供する dist/DATE フォルダーにコピーします。お気に入り：

FrontendApplication/FrontendApplication/Assets/2014-06

このフォルダー内には、次のような最終的な静的ファイルがあります。

現在、この同じコード ベースを使用しているさまざまなクライアントがいますが、フロントエンド アセットはわずかに異なります。たとえば、ロゴ イメージや、デフォルトのものをオーバーライドするための新しい css (companysname.css など) があります。そのため、カスタマイズされたバージョンのアプリをクライアント用の別のフォルダーに公開することを考えています。

FrontendApplication/FrontendApplication/Assets/CLIENTNAME

私の上司は、以下のような app.conf を提供しています。

そして彼は、Grunt にこのファイルを読み取らせてから、どのフォルダーに公開するかを決定させるべきだと言っています。つまり、client1 が定義されている場合、カスタマイズされたアセットを client1/ フォルダーに公開します。それ以外の場合は、デフォルトの 2014-06/ になります。サーバーは該当する client1/ フォルダーを探し、それが見つからない場合は、既定の 2014-06/ フォルダーを参照して静的アセットを表示します。

だからここに私の質問があります：

1. Grunt がディレクトリにあるファイルから情報を読み取って抽出し、それらをパラメーターとして構成ファイルに渡して、他のタスクで使用することは可能ですか? どのようにそれを行うのですか？
2. 可能であれば、クライアントごとに異なるバージョンのフロントエンド アセットを維持するにはどうすればよいですか?

私の見方では、これができることです：

まず、Git ブランチmasterの下で、gruntfile に宛先フォルダーを指す変数を次のように設定します。

そして、 client1などの client ブランチの下で、変数が別の宛先フォルダーを指すようにします。もちろん、このブランチの下では、scss ファイルと画像、および場合によってはスクリプトが異なる場合があります。

そうすれば、Git が宛先を処理します。master ブランチの場合は 2014-06/ に公開し、client ブランチの場合は client1/ に切り替えます。等々。したがって、Grunt は何らかの方法で上記の app.conf を読み取り、宛先フォルダーの値を取得して、そこに公開します。

もちろん、私が目にする 1 つの問題は、ファイルにアクセスするためにブランチを切り替える必要があることです。おそらく、2014-06/ と client1/ の両方をサーバーにプッシュするには、ブランチを切り替える必要があります。新しいメジャー バージョンができたら、app.conf を変更します。Grunt は、新しいブランチ/タグの下で、たとえば 2015-01/ にプッシュします。

上記は、上司の要求に基づいて私が思いついた非常に大雑把で曖昧な解決策です。しかし、率直に言って、彼も私も上記を達成する方法を知るほど Grunt に精通しておらず、個人的には (フローの自動化は言うまでもなく) フロントエンド アセットのバージョン管理に取り組んだことがないため、これを投稿しています。

事前に感謝します。

取り組んでいるプロジェクトのページ読み込み時間を短縮しようとしています。最初に、私が一緒に働いているチームは Apache/Symfony2/Postge を最適化しようとしましたが、最終的に Chrome の Dev Tools の Networking パネルで、すべての css および js ファイルをロードした後に大きな「ギャップ」を見つけました。スクリプト ファイルを削除すると、「ギャップ」はなくなります。jquery.min.js (他のライブラリやスクリプトがロードされていない) のみを残すと、ページはまだ約ロードされます。1.5秒。

開発者ツールは、この期間中に何が起こるかを示していません。これは、ブラウザーが CSS と JS を解析して解釈するときであると思いますが、DOMContentLoaded の時間を減らす必要があります。助言がありますか？

これは私の最初の投稿であり、画像を投稿するには評判が 10 必要なので、ここで話している内容のスクリーンショットをアップロードしました。

http://tinypic.com/m/imqw0n/1

PS:スクリーンショットは「平均的な」PC で撮影されています。私の個人用ラップトップ (AsusG750JZ、8 コア CPU、16Gb RAM、nVIDA 880m) での同じテストでは、非常に異なる結果が示されました。ロード時間は 5.2 秒ではなく約 1.5 秒です。残念ながら、すべての人にハイエンドでウェブ アプリを使用させることはできません ;)

PS2: JS の非同期読み込みはオプションではありません。RequireJS を試してみましたが、結果が気に入りませんでした。すべてのスクリプトに依存しているため、扱いにくかったです。

URL のプレビューを実装する割り当てがあります。これは、Facebook のようにロゴとキャッチフレーズを表示することを意味します。

jQuery に urLive ライブラリがあることは知っていますが、angularjs に実装する必要があります。次のコードを試しましたが、機能しません。

angularjsにそのようなものはありますか？

フィルターまたは SVG のメソッドを使用して、パターンとグラデーションの両方を要素に適用する方法はありますか?

これを実現するために、重複した要素(任意の形状)を作成したくありません。メンテナンスのオーバーヘッドです。

以下の画像は、予想される出力のサンプルです。

グラデーションとパターンを塗りつぶすための要素を複製したくありません。上記のコードには要素が重複しています。

私はこれらの雲を Web ページを横切って移動させようとしていますが、雲は新しい行に移動し続けます。Web サイトは次のとおりです: http://therealrohanm.me/Falcon-Hacks-Website/ (雲が表示されるまでに数秒かかります)

コードは次のとおりです: https://github.com/Meeshbhoombah/Falcon-Hacks-Website

新しい行に移動しないようにするにはどうすればよいですか? また、どうすれば雲を下ろすことができますか？

この Web ページで視差効果を作成しようとしています: http://therealrohanm.me/Falcon-Hacks-Website/

ここでコードを表示します: https://github.com/Meeshbhoombah/Falcon-Hacks-Website/tree/gh-pages

私はいくつかの問題を抱えています.最初はオレンジ色の山です(ここに描かれているように: https://github.com/Meeshbhoombah/Falcon-Hacks-Website/blob/gh-pages/images/parallax-1.png )表示されません。ピンクの木のすぐ後ろにあるはずです。

2 つ目の問題は、木が「ズームイン」しすぎていることです。木々や山の全体が見えるようにしてほしい。

これらの質問を 1 つにまとめた理由は、両方とも関連しているように感じたからですが、どうすれば達成できるのかわかりません。私は多くの異なる方法を試しました。どうすればこれらのことを行うことができますか?

ルート ディレクトリにあるすべての構成ファイルを確認することは、通常、プロジェクトの開始時に設定され、時々微調整されるだけなので、非常に厄介です。これらを WebStorm で非表示にできることはわかっていますが、非表示にするのは面倒です。

理想的には、物理​​ディレクトリを変更しない「仮想」フォルダーのようなものを作成し、展開してすべての構成ファイルを表示するだけです。Visual Studio には、「ソリューション」フォルダーと呼ばれるものがあります。

たとえば、.config という名前の「仮想」フォルダーを作成し、すべての構成ファイルをドラッグできるようにしたいと考えています。その後、これを簡単に折りたたむことができました。

• .config
  • .bowerrc
  • .editorconfig
  • .jscsrc
  • .jsintrc
  • .bower.json
  • .gulp.config.js
  • .favicon.ico
  • .カルマ.conf.js
  • bower.json
  • パッケージ.json
  • README.md

または、特定のファイルまたはフォルダーの表示を簡単に切り替える機能も優れた機能です。

ちょっとハックですが、Sublime Text の場合、file_exclude_patterns と folder_exclude_patterns を切り替えるための簡単なスクリプトがあります。私は現在、いくつかの将来のプロジェクトのために WebStorm をいじっています。

私が取り組んでいるレスポンシブ Web サイトの互換性を完全にテストするために、最適なアプリ、オンライン ツール、または存在するものを探しています。画面サイズ、ブラウザ、デバイスを確認する必要があります。

すべてのテストを 1 つのプラットフォームに統合するツールはありますか?

私たちのチームには、ソフトウェア開発者 (PHP、SQL) と Web デザイナー (HTML、CSS、JS、Foundation、Bootstrap) がいます。

典型的なシナリオ: ソフトウェア開発者がビジネス ロジックを実装し、設計は別の人が行います。

問題: フロントエンドのデザインに変更があるたびに、デザイナーは新しいデザインを開発者に送信する必要があり、開発者は変更を追跡してソースを修正する必要があります。

質問: デザイナーが Twig テンプレートを直接操作し、バックエンド開発者の助けなしに (可能であれば Symfony と LAMP のインストールなしで) HTML/CSS/JS に変更を適用できるようにするために、どのようなツール/アプローチが利用できますか?

またはより高いレベルで - Symfony 2 でバックエンドとフロントエンドの開発を分離するためのベストプラクティスは何ですか?