9

複数のMVCプロジェクト間で機能を共有するのは非常に簡単です。コードを独自のプロジェクトに入れて、必要な数のソリューションでコードを参照するだけです。清潔で、標準的で、輝かしい。

コードをスタイリングするためにこれを行う方法はありますか?アプリケーションに同様のルックアンドフィールを提供する一般的なCSSファイルを1か所にまとめたいと思います。今のところ、新しいアプリケーションごとに新しいコピーを作成する必要があります。したがって、何かを修正する必要がある場合は、12か所で12回修正する必要があります。

他の誰かがこれに対処しましたか?CSSファイルを独自のプロジェクトに分離することはできません。また、すべてのアプリケーションが完全修飾URLを介してファイルをリモートで使用できるように、CSSをどこかに配置するだけのWebアプリケーションも必要ありません。ファイルをリンクするためにソース管理で実行できるTFSトリックはありますか?思いもよらなかったことはありますか?

4

7 に答える 7

5

CDN、LESS、SASS、NuGet などを使用せずにプロジェクト間で Web リソースを共有するための「非常にシンプルな」ソリューションを次に示します。

  1. 共有するリソースを含む共通のソリューション フォルダーを作成するか、単にプロジェクトの 1 つをマスターに指定します。
  2. 「リンクとして追加」を使用して、必要に応じて共有リソース ファイルを各プロジェクトに追加します。
  3. リンクされたファイルをプロジェクト フォルダーにコピーするAfterBuildタスクを各プロジェクト ファイルに追加します。これは、Visual Studio のテスト/デバッグ (F5) がローカルで機能するためにのみ必要です。

これを行う方法の詳細が必要な場合は、読み続けてください。

共有リソースのソリューション フォルダーの構成

** 1 つのプロジェクトから 1 つまたは複数の追加プロジェクトにファイルを直接共有するだけの場合は、この手順を省略できます。

Visual Studio ソリューション フォルダーは、物理ファイル システム フォルダーを反映する必要はありませんが、そうすることで正気を保つことができます。そのため、最初にローカル ファイル システムにフォルダを作成し、リソース ファイルをそこにコピーします。新しいフォルダーは、ソリューション フォルダーの下に配置する必要があります。例えば:

\MySolution
   \Common
      \Images
      \Scripts
      \Styles

Visual Studio に戻り、[ソリューション アイテム] フォルダーを右クリックし、[ソリューション フォルダーの追加] を使用して新しいファイル システム フォルダーをレプリケートします。

次に、各フォルダーを右クリックし、[既存の項目の追加] を使用してフォルダーの内容を追加することにより、新しいソリューション フォルダーにファイルを追加します。

共有リソースをリンクとして追加

共有リソースを使用するプロジェクトごとに、プロジェクト フォルダーを右クリックし、 [既存の項目を追加] を選択します。共通フォルダーを参照し、目的のファイルを選択し、[追加] ボタンの横にあるドロップダウン矢印をクリックして、[リンクとして追加] を選択します。

プロジェクト ディレクトリ構造の外にあるファイルを追加することに関するソース管理の警告が表示される場合がありますが、リンクされたファイルはそのソースでソース管理下にあるため、これは無視できます。

ファイルをコピーするためのAfterBuildタスクの追加

アプリケーションをサーバーに発行すると、リンクされたファイルがリンク先のプロジェクト フォルダーにコピーされ、すべてが期待どおりに機能します。ただし、開発環境では、リンクされたファイルはプロジェクト フォルダーに物理的に存在しません。したがって、VS でアプリケーションをテストするために F5 キーを押すと、共有リソースが失われます。

簡単な解決策は、MSBuild タスクを追加して、各ビルドの後にリンクされたファイルをソースからコピーすることです。これは、共有リソース リンクを含むプロジェクトごとに行う必要があります。

プロジェクトを右クリックし、 [プロジェクトのアンロード] を選択します。プロジェクトをもう一度右クリックし、[ <ProjectFileName> の編集] を選択します。一番下までスクロールして、次を追加します ("</Project>" のすぐ上)。

  <Target Name="AfterBuild">
    <!-- Copy linked content files to local folders so that they are available in the debugger. 
         This is only an issue when running the application locally. The linked files should 
         be automatically published to the correct folder when publishing to a web server. -->
    <Copy SourceFiles="%(Content.Identity)"
          DestinationFiles="%(Content.Link)"
          SkipUnchangedFiles='true'
          OverwriteReadOnlyFiles='true'
          Condition="'%(Content.Link)' != ''" />
  </Target>

** TheCodeDestroyer の回答のこのリンクから適用されたタスクをコピーします。

プロジェクト ファイルを保存し、右クリックして [プロジェクトの再読み込み] を選択します。

于 2015-10-27T12:34:41.310 に答える
2

ベーススタイリングを行う1つのサイトホストと他のサイトがそれらのスタイルを参照するだけではどうでしょうか。これには何の問題もありません。

これを行うために、ある種のCDNアプリケーションを作成することもできます。

MVCアプリ#1

<link src="~/css/styles.css" />

MVCアプリ#2

<link src="http://mvcapp1.com/css/styles.css" />
于 2012-12-20T18:57:59.397 に答える
2

個人的には、100% の稼働時間を CDN に依存しているページが多数ある場合、CDN ソリューションは好きではありません。いくつかの調査の結果、私の使用に最適なこのソリューションを見つけました。代替手段を探す人は誰でも、これがその1つであることを願っています。

http://mattperdeck.com/post/Copying-linked-content-files-at-each-build-using-MSBuild.aspx

于 2013-09-19T13:28:21.737 に答える
2

まあ、私はasp.netの開発についてあまり知らないので、そうでない場合は申し訳ありませんが、

プロジェクト内のリソース ファイルの[ビルド アクション] が [なし]に設定されているか、 [コンテンツ出力ディレクトリへのコピー] が [コピー... ] に設定されている場合は、簡単にクラス ライブラリタイプのプロジェクトを作成し、そこにすべてのファイルを配置して (パスを保持して)、次にファイルを必要とするすべてのプロジェクトで、この「クラス ライブラリ」を参照してください。すべてのファイルは、ソリューション ビルドのすべての参照プロジェクトにコピーされます。

埋め込みリソースビルド アクションの場合も機能しますが、これらのファイルを含むアセンブリを指定する方法を見つける必要があります (とは異なるためAssembly.GetEntryAssembly)。

于 2012-12-20T19:47:13.713 に答える
1

同じ問題があり、目的のために、すべての一般的な CSS/JS/Images/Layout View を NuGet パッケージに入れ、必要なすべてのアプリケーションからそれを再利用しました。それは私たちにとって完全に機能します。

于 2013-11-15T17:25:47.060 に答える
1

1 - 前述の CSS テンプレート システムを調べます。

SASS-Lang Less

http://css-tricks.com/sass-vs-less/ (開始するには本当に良い記事であり、彼の関連投稿ウィジェットには多くの関連項目があります)

これらを使用すると、スタイルシートを体系的にコーディングできます。動的構成とグローバルな変更を簡単にすばやく追加できます。

2 - 独自の CSS グローバル リスティング システムを開発します。

上記の CSS スタイルシート システムを使用したくない場合。例

//cdn.com/assets/css/reset.css
//cdn.com/assets/css/main.css
//cdn.com/assets/css/page_home.css
//cdn.com/assets/css/page_cart.css

平...

//cdn.com/assets/global/form_styles.css
//cdn.com/assets/global/global_shortcuts.css

これらでは、同じフォーム パディング、テーブル、tr、およびその他のパディング ルールが使用されます。例

.black{color:#000 !important}
.right{float:right}
.left{float:left}

私はフレームワークの考え方のように聞こえることを知っていますが、うまくいきます..

グローバルをすばやく変更して、すべてのページが確実に更新されるようにすることができます。

CDN ストレージとコンパスの提案も有効です。CDN に保存すると、アプリケーションの障害、速度、負荷を心配する必要がなくなります。

あなたのアプリケーションは単純に次のようになります

/cloud/servers/settings/global/db
/cloud/servers/settings/global/librarys
/cloud/servers/settings/global/css_config.php (example)

/cloud/servers/1/webapp.com/
/cloud/servers/1/webapp.com/model
/cloud/servers/1/webapp.com/view
/cloud/servers/1/webapp.com/view/themes/tpl
/cloud/servers/1/webapp.com/inc

/cloud/servers/1/webapp2.com/
/cloud/servers/1/webapp2.com/model
/cloud/servers/1/webapp2.com/view
/cloud/servers/1/webapp2.com/view/themes/tpl
/cloud/servers/1/webapp2.com/inc

//cdn.com/assets/css

3 - アプローチの構成

個人的には、全体的な開発方法論のアプローチについて質問されるべきだと思います。CSS を CDN アプリケーションに配置するか、別のサーバーに CSS を配置して本番ライブ モード用に CDN と同期させることは良い考えです。それを分離して維持し、スタイルシート言語を介して維持することはさらに優れています。その後、スキン、css ライブラリ、画像ライブラリなどをすばやく使用できます。物事を整理し、より速く、より良くし、見るのが楽しく、コーディングに誇りを持っています.

それを維持し、より良いシステムを使用することが必要です。フォルダー構造 IMO の手動および従来のアプローチを使用する必要があります。モバイル/タブレット向けのレスポンシブ アプリケーションの設計や、すべてのアプリまたは単一のアプリ (言語も含む) に対して 1 つの CSS 行を更新することや、複数サイトの開発チームに対処することに関するその他の問題について心配する必要はありません。

私の謙虚な意見です

また、CSS スタイルシート言語を強くお勧めします。確かに、多くの人がそれらを嫌っています。しかし、それらは非常に便利になりつつあります。特に SAAS では、NodeJS のように誇大広告ではありません.実際に機能します。そして不思議なことをします。TopShop や GorgeousCouture を見てください。Arcadia のサイト。複数の言語、複数の通貨。同じクロス ブランドで作業しているサーバーとチーム、および各ストアの複数のアプリケーションを使用しています。

于 2012-12-20T19:47:00.313 に答える
0

Sass の使用に慣れている場合は、Compass 拡張機能がまさに必要なものかもしれません。

http://compass-style.org/help/tutorials/extensions/

拡張機能を gem としてバンドルすると、gem がインストールされているシステムのどこからでも、gem に含まれるスタイルを簡単に含めることができます。最近、これを最新のアプリケーション (各ユーザーがカスタマイズされたレイアウトを持つ独自のサブドメインを持つ特殊なマルチユーザー CMS) で使用しましたが、すべてのコンポーネント/ウィジェットはアプリケーション全体で同じスタイルになっています)。新しいサブドメインのスタイリングのセットアップは、単一のコマンドを実行し、単純なレイアウトのスケルトンを持つセットアップ済みのテンプレートをカスタマイズするのと同じくらい簡単です。

Compass 拡張機能使用して、画像や JavaScript ファイルをテンプレートの一部として保持できますが、展開されたファイルはスタイルのように自動的に更新されません (Compass 拡張機能のテンプレートはスタイルシートとは異なります。テンプレートはコピー用であり、スタイルシートはインポート用)。

于 2012-12-20T19:30:31.207 に答える