私はうなり声の初心者ですが、うなり声の 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 セットの設定が必要です)。
私が必要とするのはそれだけであり、より多くのうなり声のある初心者に役立つと信じています. ありがとう。