Less.js: @importsのファイルグロブをサポート

かっこいい..ノードのみ（ブラウザではない）で、他の人には役に立たないと思いますが
問題。 私が推測するのに役立つかもしれません..通常、あなたは依存関係の連鎖を持っているでしょう
したがって、すべてをアルファベット順にしたくはありません。

ええ、ブラウザがどのファイルを要求するかを知る方法がないので、それは初心者ではないようです。

それがノードにのみ適用されるという理由だけでそれを除外するつもりはありませんが、それを特に重要な機能要求とは見なしていません。

@agatronic依存関係チェーンに関して、私は昨日のノードミートアップで同じことについて誰かと話していました。 これは、例のようにコンポーネント/モジュールライブラリ、ミックスインなどに役立つものだと思います。 そして、ええ、ノードは私が考えていたものだけでした。

スタイラスでディレクトリを指定できることを読んだだけです。そうすると、 index.styが検索されます-私はそれが好きです。

ディレクトリ内のすべてのファイルをインポートする場合、ファイルにミックスインのみが含まれている（コンテンツが含まれていない）場合にのみ非常に役立ちます。順序が重要であるためです。 それが今の現実のシナリオかどうかわかりませんか？

私はインデックスのアイデアが好きです。 それはそれを行うための良い方法です。

ファイルにミックスインのみが含まれている（コンテンツが含まれていない）場合にのみ、これは本当に便利です。

私たちは多くのコンポーネントベースの開発を使用しています。 Lessコンポーネントのほとんどは、他のファイルへの依存関係がありません。 もちろん、CSSや従来のデザインパターンでは順序が重要なので、あなたは正しいと思います。 ほとんどの人はおそらくこれを私のように使用しないでしょう-つまり、おそらくすべてを使用することはないでしょう。 しかし、スタイラスインデックスのアイデアは、これに対する興味深い解決策です。

これは優先事項ではありませんが、私はこれを見て、参照として追加したいと思いました： https ://github.com/chriseppstein/sass-globbing

私はSassの大ファンであり、Chris Eppsteinのglobインポートプラグインを常に使用しています（Windowsマシンを使用していたチームメイトは使用できなかったので、注意してください）。

私はLESSで同等のものを探していました、誰かがそれのようなものを見ますか？

ええ、私は確かにこのプラグインのファンです。 グロビングを使ったことのある人なら誰でも知っていると思いますが、実際に使うまでは「持っていて良かった」と思われるものの1つです。 今、それなしでビルドをしようとすることは想像できません。 アセンブルレスを使用できます。グロブをサポートします（私はそのメンテナの1人です...）

ところで@josephspens昨日、SASSをLESSに変換するためにこのプロジェクトを作成しました。 概念実証として、 .scssファイルをbootstrap-sassとfoundationからLESSに変換しました。どちらの例も./test/フォルダーにあります。 私は実際、すべてのBootstrap .scssファイルをLESSに変換することにどれだけ近づいたかに驚いていました。 変換されたsassファイルと「ネイティブ」ブートストラップレスファイル（v2.3.1）を比較してみてください。機能は完全ではありませんが、時間を大幅に節約できます。

プロジェクトでLESSを使用する必要がある場合は、これを確認する価値があるかもしれません。 一部の言語機能では、LESSをSASSに変換するプロセスを逆にするのは難しいことではありません。

@lukeapage 、 https： //github.com/cloudhead/less.js/issues/1181#issuecomment -13546979で、これはミックスインライブラリにのみ役立つとおっしゃっていましたが、当時はそうだったのです。

ただし、 <strong i="8">@import</strong> (reference)ができたので、この機能は、参照できるすべてのスタイルシートで役立ちます。

また、 index.lessの概念について考え、そのリクエストを作成しました： https://github.com/cloudhead/less.js/issues/1339。 しかし、これらの機能は相互に排他的ではなく、必ずしも関連しているとは思いません。 Globbingでは、包含パターンと除外パターンの両方が可能であるため、importステートメント自体でglobbingパターンから多くの制御を行うことができます。

index.less機能は、依存関係の定義に似た、完全に異なる課題を解決すると思います。モジュール、コンポーネント、テーマなどに非常に役立ちます。

@jonschlinkert同意します

@lukeapageは、コード内のどの場所を変更する必要があるか（tree / import / .jsを超えて）、または私が考慮する必要があることについての提案を私に教えてくれますか？たとえば、これはノードに固有である必要があります。 ？ 私はそれを撃つかもしれません。

これは素晴らしい機能です。 私は現在、 bundle.lessファイルにスタイルシートの非常に大きな長いリストを持っています：

<strong i="7">@import</strong> 'pages/home';
<strong i="8">@import</strong> 'pages/login';
<strong i="9">@import</strong> 'pages/404';
//etc

これを次のように凝縮すると便利です。

<strong i="13">@import</strong> 'pages/*';

または類似。

スタイラスペンを使用すると、これを行うことができます- <strong i="5">@import</strong> 'partials/*.styl -そして私はそれを常に使用していました。 手動でインポートを簿記するという面倒な作業から私を軽減するために、Lessでもこれを使用することに非常に興味があります。

この+明示的なインポート+非重複は本当に便利です：

// Import specific file
<strong i="6">@import</strong> "extras/specific.less"
// Import all others, specific file is skipped in this glob
<strong i="7">@import</strong> "extras/*.less"

@lukeapageこのためのプラグインを作成したいのですが、どこから始めればよいかを教えていただけますか？ どうも

ジョン、私があなたの最初の助けの要求を逃したことを残念に思います、それは意図的ではありませんでした。
私たちはそれをコアに入れるのが最善かもしれないと思います（プラグインは
標準のノードファイルアクセスをオーバーライドします-継承して実装できます
しかし、それは別のプラグインがその上に構築されるのを防ぎます
非常に注意してください）、とにかく、少なくともインポート用のコアにサポートを追加します
1つのインポートからの複数のファイル。 今日、新しいバウアープラグインが可能です
それをしますが、それは少しハッキーです。 連絡いたします。

はぁ、コメントしたことに気づかなかったので、2人で笑いました。 何の心配もありません。

それをコアに入れるのが最善かもしれません

いいですね。 私も喜んでお手伝いさせていただきます。 どちらにしても心配ありません。

わかりました、考えていました、そしてこれは私がそれをする方法です。

1. 抽象ファイルマネージャーにexpandToFilelistを追加します。 デフォルトでは、
   指定されたファイル名を含む配列を返します。 すべきかどうかわからない
   同期または非同期にする-おそらく問題ではない-非同期にする？
2. インポートマネージャーで、ファイルマネージャーができたら、その関数を呼び出します。 それで
   すべてのファイルをループして、1で行っていたことをそれぞれ実行します。
3. すべてのファイルからの結果が得られるまで、インポートマネージャーを待機させます
   その方法で（インポートビジターにある）コールバックにコールバックする前に
   一貫した順序を維持できます。 コールバックには、
   すべての引数を含む配列（たとえば、完全なファイル名を1回受信する必要があります）
   ファイルごと）。
4. コンテキストの周りのインポートビジターに問題があるかもしれません-ではありません
   承知しました
5. インポートはルートの配列（またはおそらくルートの配列）を取ります
   およびファイル名）。 そのeval関数ですべてのルートを評価する必要があります
   結合されたルートを返します。または、次の配列を使用して新しいルールセットを作成します。
   それがうまくいくなら、エヴァルドのルーツ
6. コンパイルとテスト-すべてが機能するはずです
7. ファイル名の場合、expandToFilelistを実装するようにノードファイルマネージャーを変更します
   含む*
8. テストを追加し、のジャスミンセクションの除外にテストを追加します
   gruntfile、ブラウザには実装できないため
   出来上がり！

コメントしたかったのですが、回避策として、ビルドツールとしてgulpを使用している場合は、 gulpとgulp-concatを使用できます。

gulp.src([
    'src/styles/main.less'
    ,'src/controls/**/*.less`
])
.pipe(concat('bundle.less')
.pipe(less())
...

これは事実上私のディレクトリ構造です...（ただし、私の構造は少し異なります）。 ノードのみが非常に役立つ場合でも、これが組み込み機能であることを期待していました。

ここで+1すると思っただけです...かなり一般的なパターンです。 注文の問題を回避するための簡単な回避策もいくつかあります。

+1

私はそれを言いませんでしたが、私はオプションをいただければ幸いです（サーバー側のみであっても）...

皮肉なことに、ここではライブラリプライマリがjsになりました。これは、同じライブラリをサーバーとクライアントで使用でき、サーバーのみの機能を追加するためだけであるためです）。

解析エンジンはパリティを保持できます。 それはまだ大きな利点であり、私たちが議論していることとは何の関係もありません。

+1

まだ十分ではないかのように：+1

真剣に+1

+1

：+1：

+1

+1

+1

+1

：+1：お願いします！

+1イエスはワイルドカードのサポートに満足するでしょう。

皆さん、フィードバックは素晴らしいですが、 +1は、この機能をこれ以上速く実現することはできません。 実装の準備ができているとマークされており、誰かが実装すると実装されます。

+1イエスはワイルドカードのサポートに満足するでしょう。

イエス様がプリプロセッサを選んだとしたら、それは少ないと言っても過言ではありません。

この問題の解決を待つことができなくなったので、それを実行するプラグインを作成し、プロジェクトに使用します。 https://github.com/just-boris/less-plugin-glob
@importsのカスタムファイルローダーを作成することを許可しません。 インポートパスにグロブがあるインポートを解決するものを作成しました。 フィードバックをいただければ幸いです。

@ just-borisこんにちは、NPM以外でこれをインストールする方法を考えていました。

NPMを使用すると、次のエラーが発生します。

npm ERR！ 404'less-glob-plugin'はnpmレジストリにありません。
npm ERR！ 404公開するには、作成者にバグを報告する必要があります
npm ERR！ 404
npm ERR！ 404からインストールすることもできることに注意してください
npm ERR！ 404 tarball、folder、またはhttp url、またはgiturl。

事前のおかげで、これは多くの心痛を救うでしょう。

@tonyflp 、申し訳ありませんが、タイプミスがありました。 less-plugin-globをインストールする必要があります。
Lessは、 less-plugin-*表記で指定されたプラグインのみを受け入れます

@ just-borisそれはうまくいきました、これに感謝します。

この機能の更新はありませんか？

just-boris私はgrunt-contribを使用します-以下のようなプラグインをロードする方法の例があります：

プラグイン：[
new（require（'less-plugin-autoprefix'））（{browsers：["last 2 version"]}）、
new（require（'less-plugin-clean-css'））（cleanCssOptions）
]、

grunt-contrib-lessで動作するように、すばらしいプラグインをここにロードするにはどうすればよいですか？

大きい：+1：機能用

@vospascalは私のリポジトリで答えました

;）thnx @ just-boris私が見た:-)：+1：

まだこの機能を待っています：+1:。 ありがとう、@just-boris。

@ just-borisありがとう！ ありがとうございます:-)

すべてのLessファイルを単一の場所に配置するのではなく、すべてのコンポーネントを1つの場所にバンドルすることを好むため、これは私にとって非常に便利な機能です。 これにより、ファイルがいたるところに存在しなくなり、インポートの手動リストを維持するのは悪夢になります。

Gulpを使用してLessファイルを作成する人は、gulp-injectプラグインを使用して、メインのLessファイルに@importステートメントを自動的に作成することに成功しました。 私はここでそれを簡単に書きました：http： //www.michaelbromley.co.uk/blog/425/automatic-import-of-lesssass-files-with-gulp

グロブを少なくするために、プロジェクトでこれを簡単に実行できます。

npm install less-plugin-glob --save-dev

次に、これをlessタスクのオプショングループのGruntfileに追加します

plugins: [require('less-plugin-glob')]

結果は次のようになります。

···
options: {
    compress: true,
    yuicompress: true,
    optimization: 2,
    cleancss: true,
    sourceMap: false,
    sourceMapFilename: 'css/maps/style.css.map',
    plugins: [require('less-plugin-glob')]
},
···

これで、.lessファイルに次のように書き込むことができます。

···
<strong i="15">@import</strong> "commons/**/*";
<strong i="16">@import</strong> "basic/**/*";
···

ここに来て、globのインポートがサポートされているかどうか疑問に思いましたが、ビルドプロセスにgrunt /gulpの代わりに1ライナーのシェルスクリプトをいくつか使用しているためです。 最終的にfindとcatを使用しただけで、ソースは他のどの方法よりもクリーンなままです。 少ないものは素晴らしいままです。

# src/index.less + src/foo/bar.less + ... = dist/index.css
find -X src -type f -name '*.less' | xargs cat | lessc - | cleancss --s0 >dist/index.css

+1

これが今までに起こっていないことに本当に驚いています。 Gulpは少なくともこの機能をサポートしています。

@davidcalhounこのスレッドの最初の投稿を読んでください。

同じように、私が知る限り、ほとんどの人はLESSファイルをCSSにコンパイルしていますが、ブラウザーにLESSを直接​​解釈させている多くのサイトを知りませんか？ デバッグしたい人のために、ソースマップを使用することができます

@just-borisプラグインを動作させることができません...私は何か間違ったことをしていると思います。

他の誰かがそれを機能させましたか？

エラーが発生しません...グロブを使用しようとすると出力が表示されません。

gulp.task( 'styles', () => {
  return gulp.src( [ 'app/styles/main.less' ] )
    .pipe( $.less( {
      plugins: [ require( 'less-plugin-glob' ) ],
    } ) )
    .pipe( gulp.dest( 'dist/styles' ) );
} );

// main.less
// Each line below is tried on it's own of course.
<strong i="10">@import</strong> "app/module/waffle.less"; // Works
<strong i="11">@import</strong> "app/module/**"; // Does not work.
<strong i="12">@import</strong> "app/module/**/*"; // Does not work.
<strong i="13">@import</strong> "app/module/**/*.less"; // Does not work.

@SpencerCarstensプラグイン独自のリポジトリで問題を提起することをお勧めします。

@ Seven-phases-max：+1：

より多くの聴衆にリーチしたいと思っていましたが、あなたは正しいです。

@ Seven-phases-max glob-pluginを内部に統合することはできませんか？

それはうまく統合されますが、何もしないようです。

プラグインをコメントアウトすると、インポートでのエラーが正しくなくなります
グロビン。

戻すとエラーが止まります。

だから、私はそれが何かをしていると思います。

2015年8月5日水曜日、Mattia [email protected]
書きました：

@SpencerCarstenshttps ://github.com/SpencerCarstens統合できません
グロブプラグインの内部が少ない？

—
このメールに直接返信するか、GitHubで表示してください
https://github.com/less/less.js/issues/1181#issuecomment-128262749 。

心から、

スペンサーカルステンス

@equinusocio

glob-pluginを内部に統合することはできませんか？

「これをコアに入れない理由」を意味する場合...それでは、現在のLessアプローチ（ここではさまざまなスレッドにわたるいくつかの議論で設定されているものが少ないか多い）は、大まかに次のとおりです。 _前に_その機能がそこに属していることが絶対的かつ完全に明らかになり、他の方法はありません。」 つまり、何かをプラグインとして実装できる場合は、プラグインとして実装する必要があります（そのため、たとえば、コアに長く存在するclean-css機能でさえコアから対応するプラグインに移動されました） 。

@ Seven-phases-max ok、ありがとう。 私はこれが好き。

@just-borisのプラグインに実装されているとおりに閉じます。

+1

+1

古いスレッドを復活させることについて話す

これらの+1は何を示すことになっていますか？ プラグインは機能しませんか？

+1は、あなたもそれを望んでいるか、サポートしていることを示します

何をサポートしますか？ 私が言ってることはそういうことです。 これは解決され、問題は解決されました。 だから私は何が+1されているのか尋ねていますか？

私はこれらの電子メールを2年以上受け取っていますが、ここでの取引は何ですか。