2013-03-20 5 views
6

間のCSSやJS圧縮/縮小さバージョンを制御する方法について説明します。私はまだこれに新たなんだけど、私は環境間で同期され、私のcssjsファイルを保存する方法のベストプラクティスを知りたいのです。バージョン管理:私は私のプロジェクトのバージョン管理のために(GitHubの経由)のgitを使用していた環境

例:私はjsスクリプトを開発者に書いています。私は自分の仕事に満足しており、テストに励んでいます。テストでは、圧縮/圧縮されたバージョンが必要です。どのように私はオーバーヘッドのタスクの多くをせずにそれを達成するだろうか?あなたは何をしていますか?私は、コードを圧縮して指定した環境にプッシュするデプロイスクリプトの一部であると仮定しています。

これは、私のプロジェクトのheader(および/またはfooter)ファイルはどうなりますか?

<link rel="stylesheet" href="<?php echo base_url(); ?>css/main.css">

を、私のtestingがあります:私のdevがある場合は

<link rel="stylesheet" href="<?php echo base_url(); ?>css/main.min.css">

すべての罰金です

、しかし、私は私のヘッダーに変更を加える必要がある場合は?どのように私はこれらのすべてのものをお互いに分けるだろうか?ヘッダーを変更してテストやプロダクションにプッシュすると、インクルードラインから.minが失われます。

現在、私は、更新プログラムを展開するために何をすべきかは、単純なgit pull origin [branch]私が更新する環境内のコマンドラインからです。

繰り返しますが、私はそれが必要で学ぶものは何でも、ベストプラクティスを探しています。ありがとう!

+8

バージョンコントロールでは、私は、ほとんどの場合、ミニソフトのソースを維持しない**でしょう。いくつかの種類のビルドスクリプト(たくさんのオプション)を書いて、そのスクリプトをバージョンコントロールにチェックインし、それを使って配備時に(など)を縮小します。 – Pointy

+0

絶対パスを使用するだけで、ビルドやデプロイメントのステップでファイルを書き直すのが簡単になります:)また、圧縮ファイル名にハッシュを追加して、長い間キャッシュすることができます。 –

+0

@Pointy +1は、ソー​​スコントロール内にミニファイルを保存しないためです。これは、コンパイルされたバイナリをソース管理に保つようなものです。 – Floremin

答えて

5

あなたは、このようなLESSやSassのようプリプロセッサツールを、チェックアウトする場合があります。これらのツールを使用すると、CSSを作成することができます(私は、JSを処理して縮小することができると信じています)。そして、環境に基づいてコードをコンパイルする方法を扱うスクリプトを設定します。

"ソース"ファイルにコードを書いて、設定ファイルに設定された設定に従ってコードをコンパイルするようにプリプロセッサを設定します(Sassの場合、これはコンパイルのバージョンを無視するようにGitを設定し、サーバ上のソースファイルをコンパイルするために受信後のフックを設定します。あなたのHTMLはコンパイルされたファイル(環境全体で同じ名前を持つ必要があります)にアクセスできるように記述することができるので、コードが実行されている環境を毎回決めるロジックを書く必要はありません。

+0

プロジェクトのリストの中の1つがLESSまたはSASSを組み込むことがあるため、これは素晴らしいニュースです。おそらく後者はより堅牢です。記事を書こうとしてくれてありがとう。 –

+2

これは本当に良い提案です。これらのツールを注意深く見て、あなたの哲学に合ったものを選んでください。しかし、あなたは後で本当に感謝します。 – Pointy

1

通常、ページロード時にCMSによってミニファイルが生成されます。したがって、コードの観点からは、実際のjsおよびcssファイルですべてのコードが追跡されるため、縮小版を追跡する必要はありません。ですから、縮小されたコピーは.gitignoreファイルを使って無視することができます。

css-min   #directory to store generated minified css files 
js-min    #directory to store generated minified js files 
tmp    #directory to store temporary files 
files/images/cache #directory for storing generated images such as thumbnails 
settings.php  #File that stores system variables. 

設定ファイルは、「DEV」、「ステージング」、「生産」のようなあなたのプラットフォームとしてグローバル変数を設定するために使用されます。

マイ.gitignoreファイルは、通常のように見えます。その後、他のファイルで、使用するcss/jsファイルをプラットフォームで確認できます。このファイルはリポジトリで無視されるため、各プラットフォーム固有の設定を行うことができます。

if ($GLOBAL['platform'] = PLATFORM_DEV) { 
    $path = 'css/main.css'; 
} 
elseif ($GLOBAL['platform'] = PLATFORM_STAGE) { 
    $path = 'css-min/main.min.css'; 
} 

<link rel="stylesheet" href="<?php print base_url(); print $path; ?>"> 
1
  1. バージョン管理にCSS、JSの縮小さバージョンを入れないでください。それは重複している。

  2. Gitはデロopyで使用できますが、その目的は展開されていません。

  3. これは簡単なCSSタグです。クイック・ラウンドアップは、あなたのフレームワークの環境を利用できます。私が知っているように、CodeIgniterにはこの機能があります。 env == testの場合は、縮小バージョンを含めます。そうでない場合は、未加工バージョンを含めます。

さらに、ミニバージョンを自動的に生成するには、ビルドスクリプトまたはフレームワークプラグインが必要です。

関連する問題