Clever Geek Handbook

その場でLESSファイルを自分で処理するサーバー

LESSは、CSSにはない定数、継承、ネストされたスタイルなどを使用する機能を追加する一般的なCSSプリプロセッサです。 LESSに出会うとすぐに、これが私が必要としているものであることに気付きました。 私の喜びを覆い隠した唯一のことは、開発者がその使用のために2つのオプションのみを提供することでした：ブラウザーで直接前処理するJavaScriptファイルを埋め込むか、LESSファイルを処理する特別なスクリプト（node.jsで実行する必要があります）を使用します。



クライアント上でLESSファイルを処理するオプションが気に入らなかったのは、大きなLESSファイルの場合、ページのロード時に顕著な一時停止が発生するためです。 twitter bootstrap-aのLESSバージョンを使用している場合、ロードは数秒増加しますが、これはまったく受け入れられません。

プリプロセッサを「実行」しなければならなかったため、プリコンパイルオプションは私には適していませんでした。 LESSファイルが変更されたときに自動的に再生成するプログラムを見ましたが、有料でMacOS専用であることが判明しました。



LESSファイルは、Webサーバーからの要求に応じてオンザフライで処理されるため、CSSと同様に接続されます。 このアプローチには、上記のすべての欠点がありません。 ただし、この場合、LESSファイルの構文のエラーを観察することはもう少し難しくなります。エラーは処理サーバーのログでのみ確認できます。 ただし、LESSファイル構文のエラーは私にとって非常にまれであったため、これは問題になりませんでした。





解決策



残念ながら、PythonまたはJava（開発中の言語）でLESSファイルプロセッサは見つかりませんでした。 そのため、node.jsで小さなhttp-serverを作成しました。これは、LESSファイルの「公式」プロセッサのコードを使用し、オンザフライでファイルを処理します。 ただし、このアプローチでは、少ないファイルの配布を別のサーバーにリダイレクトする必要があります。つまり、nginxなしでは実行できません。 原則として、他のサーバー（たとえば、lighttpd）を使用できますが、nginxは私に近いので、さらにすべての構成例を検討します。



LESSファイルのコンソールプロセッサであるlesscスクリプトを少し修正して、すべての起動パラメーターを保存しました（たとえば、生成されたCSSを圧縮できます）。 私が書いたサーバーのソースコード 。 ポート1337で開始し、要求を処理して提供する.lessファイルへの相対パスとして処理します。



次に、受信したhttpサーバーですべてのファイルが処理されるようにnginxをセットアップします。 



location ~ \.less$ { proxy_path http://127.0.0.1:1337; }




それだけです！ これで、ブート時に心配することなく、プリプロセッサを手動で呼び出すことなく、プロジェクトでLESSを安全に使用できます。 通常の.cssのような.lessファイルを挿入するだけです。 

 <link rel="stylesheet" type="text/css" href="bootstrap.less">




キャッシング


バトルサーバーで各リクエストのLESSファイルを処理するのは、確かに費用がかかりすぎます。 ここで、nginxは、背後にあるサーバーの回答をキャッシュする機会を節約します。この場合、LESSファイルの処理結果は、指定された期間（たとえば、30秒）nginx（ファイルシステム上）によってキャッシュされます。 30秒に1回、LESSファイルの処理はシステムをロードせず、スタイルを使用してファイルを更新するときの30秒の遅延は通常かなり許容できます（必要に応じて、より短いキャッシュストレージ時間を選択できます）。



nginxの構成は次のように変更されます。 

 #   ,   +    # : http://nginx.org/ru/docs/http/ngx_http_proxy_module.html#proxy_cache_path proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=microcache:5m max_size=1000m; server { # ...     # location ~ \.less$ { #     .less proxy_cache microcache; #   (   microcache)    .less  proxy_cache_valid 200 30s; #       200 ()   30  proxy_pass http://127.0.0.1:1337; #    http-   } }


順を追った説明



次に、これを自分たちで展開するために何をする必要があるかを、段階的に簡単に考えてみましょう。

  1. node.jsをインストールします。 Linuxの場合-リポジトリから設定し、 オフサイトからポピーとワインを入れます
  2. （まだ使用していない場合）nginxをインストールし、サイトを配布するように構成します
  3. github source LESS processorからダウンロード
  4. httpサーバーのソースコードを取得し、binサブディレクトリ内のLESSプロセッサと共にダウンロードしたフォルダーに配置します。
  5. LESSソースのbinディレクトリにいるので、次のコマンドでhttpサーバーを起動します 

     node lessserv --path=/path/to/project/root


    --path =の後に、プロジェクトのルートへのパスがあり、そこから.lessファイルが配布されます。 すべての処理エラーがコンソールに表示されます。

  6. 実行中のhttpサーバーを介してすべてのリクエストを.lessファイルにリダイレクトします 

     location ~ \.less$ { proxy_path http://127.0.0.1:1337; }


  7. バトルサーバーで、.lessファイルの処理結果のキャッシュを有効にします


参照資料





More articles:


All Articles