必要以上のもの

Question

私はクライアント側のJavaScriptバージョンを使用してLess Less Codeをコンパイルしていますが、最終的なライブサイトでもこれを続けたいと思っています（私は知っています...悪いフォームですが、ユーザーができるようにすることができますいくつかの変数をカスタマイズして、そのアプリ全体をその場で「テーマ」していることを確認します。これは、一度ロードされたことのないWebAppであると見ています。

requirejsも使用しています。

質問は：

a）コードの読み込みが少ないように必要なコードを取得するにはどうすればよいですか？

b）コンピレーションが完了したときにイベントを派遣しますか？と

c）コマンドで再コンパイルするために少ないトリガーをトリガーする方法はありますか？

ありがとう。

Answer 1

私は使用しました テキストローダープラグイン 必要に応じて.lessファイルをテキストとしてロードし、次に新しいLESS.PARSERインスタンスを作成してテキストを解析し、スタイルテキストを自分で追加します。

(new less.Parser()).parse(lessText, function (err, css) {
  if (err) {
    if (typeof console !== 'undefined' && console.error) {
      console.error(err);
    }
  } else {
    var style = document.createElement('style');
    style.type = 'text/css';
    style.textContent = css.toCSS();
  }
});

同様のアプローチをとることもできますが、スタイルノードにIDを削除し、そのIDを削除してから、オンデマンドで必要なときに別の補償テキストを追加します。

警告：テキストプラグインは、テキストファイルがWebページと同じドメインにある場合にのみ、テキストファイルをオンデマンドでロードできます。 requireJSオプティマイザーを使用する場合、テキストを組み込まれ、最適化されたJSファイルにインライン化できます。

Answer 2

@Jrburke：コードに基づいて、Quick requirejsプラグインをまとめました。

define({

    version: '0.1',

    load: function(name, req, onLoad, config) {

        req(['text!' + name, 'base/less'], function(lessText) {

            var styleElem;

            (new less.Parser()).parse(lessText, function (err, css) {
                if (err) {
                    if (typeof console !== 'undefined' && console.error) {
                        console.error(err);
                    }
                } else {
                    styleElem = document.createElement('style');
                    styleElem.type = 'text/css';

                    if (styleElem.styleSheet) 
                        styleElem.styleSheet.cssText = css.toCSS();
                    else 
                        styleElem.appendChild( document.createTextNode( css.toCSS() ) );

                    document.getElementsByTagName("head")[0].appendChild( styleElem );
                }

                onLoad(styleElem);
            });

        });     
    }

});

「ベース/少ない」は、より少ないソースを指します。これを事前にロードして、グローバルを想定することもできます less オブジェクトが存在します。理想的には、より少ないパーサーオブジェクトをこのプラグイン自体に引き込み、グローバルをまったく作成しないようにしたいと思います。

これを使用して、次のようなことができます。

require(['less!global.less'], function(elem) {

});

その時点で、Global.lessが解析され、ページに追加され、何らかの理由でそれを削除または変更する必要がある場合に備えて、Elemがスタイル要素を指していることを返します。

誰かがこれを行うより良い方法を知っていますか、それともより良い方法を知っていますか？

乾杯

Answer 3

私はインポート付き@nicholasプラグインに問題がありました。ファイルのパスを検索パスに追加して修正し、ファイル名を設定してより良いエラーメッセージを作成します。

// http://stackoverflow.com/questions/5889901/requirejs-and-less
// enables require(['share/less!whatever.less'], function(elem) {});
define({
    version: '0.1',
    load: function(name, req, onLoad, config) {
        req(['share/text!' + name, 'share/less-1.3.0'], function(lessText) {
            var styleElem;
            var parser = new(less.Parser)({
                filename: name,
                paths: [name.split('/').slice(0,-1).join('/') + '/'],
            });
            parser.parse(lessText, function (err, css) {
                if (err) {
                    if (typeof console !== 'undefined' && console.error) {
                        console.error(err);
                    }
                } else {
                    styleElem = document.createElement('style');
                    styleElem.type = 'text/css';

                    if (styleElem.styleSheet)
                        styleElem.styleSheet.cssText = css.toCSS();
                    else
                        styleElem.appendChild( document.createTextNode( css.toCSS() ) );

                    document.getElementsByTagName("head")[0].appendChild( styleElem );
                }
                onLoad(styleElem);
            });
        });
    }
});