2

私は、Android アプリケーションのビルドで ANT を実際に使用した経験しかない Web 開発でビルド自動化を学びたいと思っていました。

LESS を利用する Web サイトを構築したいのですが、これを実現する方法がわかりません。開発では組み込み JS アプローチを使用し、デプロイ時に LESS を CSS にコンパイルするのは良い習慣のように思えますが、良いアプローチがわかりません。これにより、ビルド スクリプト内の jess.js の LESS リンクと JS インクルードが一致します。例えば

交換:

... html ...

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

... html ...

と：

<link rel="stylesheet/css" type="text/css" href="styles.min.css" />

私が言及したことが理にかなっていることを願っています。

使える

誰かが私にこの問題に関する指針/アドバイスを与えることができれば、私はそれを大いに感謝します.

4

2 に答える 2

2

私は Less.js のコア チームに所属しています。回避できる場合は、ブラウザ バージョンの LESS を使用しないでください (たとえば、ユーザーがブラウザで「テーマ」をリアルタイムで編集できるようにする場合など)。ブラウザ版）。

Less を CSS にコンパイルするには、このビルド ツールを使用してみてください: https://github.com/assemble/assemble-styles。推奨される方法は、LESS を CSS にプリコンパイルすることです。スタイルをアセンブルすると、LESS/CSS ファイルの「バンドル」または複数のバージョンを簡単に作成できます。ウォッチ タスクを追加して、LESS で作業しているときにファイルは自動的に CSS にコンパイルされます。

開発プロセスの一環として LESS が CSS にコンパイルされるため、本番環境で CSS をどのように処理したいかだけにエネルギーを集中できます (LESS について考える必要さえありません)。わかる？ご不明な点がございましたら、お気軽にお問い合わせください。

に慣れている場合npm、これは簡単に使用できます。やるだけnpm install assemble-styles

次に、README の指示に従います。

于 2013-03-17T18:08:11.090 に答える
1

あなたの例のように、ビルドスクリプトはcssファイルをjsファイルとマージできません。これらは、2 つの完全に異なるニーズに対応する 2 つの完全に異なる言語であり、互いに区別する必要があります。Less は最終的に CSS であるため、Less ファイルを js ファイルにマージしても意味がありません。

さらに、ベスト プラクティスとして、 cssリンクをドキュメントの head に配置し (Steve Souders がここで提案しているように)、JavaScriptコードをドキュメントの末尾の body タグを閉じる直前に配置することをお勧めします (Steve Souders もここで)。これらのルール (パフォーマンスのために強く推奨されます) に従うと、次のように、css リンクを html 内の js スクリプトから遠く離れた場所に配置することになります。

<html>
  <head>
     <link rel="stylesheet/less" type="text/css" href="styles.css" />
  </head>
  <body>

  ....here goes the content of the page

    <script type="text/css" src="scripts.js"></script>
  </body>
</html>

ここで、非常に基本的なワークフローを想像してみましょう。最低限の HTML 構造があり、そのレイアウトを調整する必要があります。css reset( reset.css) を追加し、Less ファイルでドキュメントのスタイル設定を開始しますstyle.less。追加すると

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

ブラウザは .less ファイルを認識しないため、ドキュメントの先頭では変更を確認できません。これらのファイルは、css で前処理して "変換" する必要があります。これにより、ブラウザはファイルを解析し、指定されたスタイルを HTML ページに適用できます。したがって、(.less) ファイルをプリプロセッサで実行すると、プリプロセッサが css ファイルを吐き出します。だからあなたは次の<head>ようになります：

<head>
  <link type="text/css" href="css/reset.css" />
  <link type="text/css" href="css/styles.css" />
</head>

style.less ファイルは HTML では参照されず、対応する CSS の styles.css のみが参照されることに注意してください。レイアウトに満足したら、次に進みます。

ここは、ビルド スクリプトが真価を発揮するのに適した場所です。ビルド スクリプトは、(とりわけ) 同種の外部ファイルを連結します。この場合、これら 2 つのファイルを 1 つのファイルにマージできます。あなたの新しい<head>ものは次のとおりです。

<head>
  <link type="text/css" href="css/main.css" />
</head>

一番下のjsファイルでも同じことが起こります。から：

 <script src="one.js" type="text/javascript"></script>
 <script src="two.js" type="text/javascript"></script>
 <script src="three.js" type="text/javascript"></script>

に：

 <script src="scripts.js" type="text/javascript"></script>

前述したように、これは Less (または Sass/Scss、または Stylus) とビルド スクリプトを使用したワークフローの非常に基本的で大まかな例です。ポール アイリッシュは、このビデオで動作中のビルド スクリプトを最もシンプルかつ明確に表現したと言えます。特に、質問で参照されているように、HTML5 ボイラープレートを備えているため、強くお勧めします。

これが理解を深めるのに役立つことを願っています。疑問がある場合はお知らせください。

于 2013-03-15T02:11:00.203 に答える