3

デプロイ先に基づいて、SASS (および場合によっては Coffeescript) に異なるパスを作成するフロントエンド フレームワークのビルド システムを作成しようとしています。たとえば、ローカルの SASS で参照している画像ファイルがあり../images/image.png、これはローカル環境で正常に動作します。ただし、私のクライアントには、別の方法で実行する必要がある非常にロックダウンされた環境があります (CDN からイメージを取得する)。したがって、それらのイメージ パスは のようになり~Some_service_call/images/image.pngます。

私が望んでいるのは、両方の環境で何らかの構成を準備することです。そのため、ローカルで開発しているときに、ターミナルのようなコマンドを実行するか、build local packageデプロイbuild deploy package先の環境を自動的に認識してパスベースを使用できますその上で。各SASS / Coffeescript変数に使用するパスを制御する個別の構成JSONファイルを用意するのが理想的です。

これまでのところ、これについて Grunt を調べ始めていますが、それが正しい解決策かどうかはわかりません。誰かがこの種のことをやろうとしたことがありますか？

4

2 に答える 2

3

Compass を使用してプロジェクトをコンパイルします。

Compassconfig.rbでカスタム関数を定義します。 

# Assign a name to the project and pass it into SASS
$environment = "development"
module Sass::Script::Functions
  def environment
    Sass::Script::String.new($environment)
  end
end

この関数は SASS で利用可能になります:

$images-root: ".."
@if environment() == production
  $images-root: "/var/www/static/images"

html
  background-image: url( #{$images-root + "/sexy-lady.png"} )

裏地に合わせてカスタマイズできます。たとえば、パスを SASS に渡すことができます。または、いくつかの高度なロジック (サービス呼び出し、JSON の読み取り) を使用して別の Ruby ファイルを作成し、それを要求しconfig.rbて SASS 関数に渡すこともできます。

最後に、情報を更新して実行する小さなスクリプトを作成しますcompass compile。

PS Compass では、開発用にデバッグ情報を追加したり、本番用に CSS 縮小を追加したりすることもできます。

于 2013-04-04T21:39:20.403 に答える
0

config.rb を作成したくない場合は、 gruntfile.js のオプションenvironmentを使用して、 productionまたはdevelopmentに設定してください:

compass: {          
            prod: {
                options: {                  
                    environment: 'production'
                }
            },
            dev: {
                options: {
                    environment: 'development'
                }
            }
        }

環境値は、file.scssまたはfile.sassファイルで使用できます。

$font-path: "../fonts";

@if compass-env() == 'production'
{
    $font-path: "../assets/fonts"
}
于 2015-09-10T23:05:57.970 に答える