1

私はうなり声の初心者ですが、うなり声の concat と uglify の使い方を知っているだけです。今、私はcssの縮小、うなり声のコピーとライブロード、およびその他のタスクについて助けが必要です。

今、私は自分の JS ウィジェット用の UI システムを構築する必要があるので、変数を css ファイルに追加して (何らかの形で less のように)、実際の css にコンパイル (変数を実際のスタイルに置き換える) することを考えています。しかし、ウィジェット全体が 20k であるため、less を使用することはできません。LESS は大きすぎます。

変数の形でjsファイルにコンパイルするには、mincssやi-dont-know-whatなどを実行するためにgruntを使用する必要があるようです。そして、進行全体を自動化するには、LiveLoad とその他のテイストが必要です。

これが私がやりたいことです:

スタイル.css:

.a{
  width: $aWidth;
  color: $aColor;
}

これは、実際には実際のcssではないcssファイルに書きたいものです。

最初に縮小します(偽のCSSを縮小できるかどうかわかりませんか?):style.min.css

.a{width: $aWidth;color: $aColor;}

次に、それをcss.jsにコンパイルします(「var css =」を追加するだけです。これが主に私を止める場所です):

var css = ".a{width: $aWidth;color: $aColor;}";

js で簡単な RegExp 置換を行って、実際の css、簡単でシンプルな less.js にします。私が行う方法を知っている連結...

連結ファイル widget.js をローカル テスト用の nginx 静的ファイル フォルダーにコピーします (これは grunt コピーを使用しますか?)

上記のすべてのタスクを自動実行し、style.css ファイルを保存/変更するときにページを更新します (これは watch? または liveload? を使用し、おそらく css または js を監視するために 2 セットの設定が必要です)。

私が必要とするのはそれだけであり、より多くのうなり声のある初心者に役立つと信じています. ありがとう。

4

1 に答える 1

0

おそらく、実際にはgrunt-ucsslessと組み合わせて使用​​できます。README から:

タスクは 2 つのことを実行できます。ucss を使用して html+css を分析し、未使用のセレクターを grunt ログに出力し、その情報を使用して新しいクリーンを作成します。

于 2013-11-14T07:38:35.343 に答える