Less.js: Dateiglobbing für @imports unterstützen

Cool .. obwohl nur Knoten (nicht Browser) und nicht glauben, dass es anderen helfen wird
Themen. Könnte nützlich sein, denke ich ... normalerweise hätten Sie eine Abhängigkeitskette
Sie möchten also nicht alles in alphabetischer Reihenfolge.

Ja, der Browser kann nicht wissen, welche Dateien angefordert werden sollen, also scheint es ein Nichtstarter zu sein.

Nun, ich würde es nicht ausschließen, nur weil es nur für Knoten gelten würde, aber ich sehe es auch nicht als besonders wichtige Feature-Anfrage.

@agatronic in Bezug auf die Abhängigkeitskette, ich habe gestern beim Node-Treffen mit jemandem darüber gesprochen. Ich denke, das ist etwas, das für Komponenten-/Modulbibliotheken, Mixins usw. wie im Beispiel nützlich ist. Und ja, Knoten war nur das, was ich dachte.

Ich habe gerade gelesen, dass Sie mit dem Stift ein Verzeichnis angeben können, und wenn Sie das tun, sucht er nach einem index.sty - das gefällt mir.

Was das Importieren jeder Datei in einem Verzeichnis betrifft, so ist es nur dann wirklich nützlich, wenn die Dateien nur Mixins (kein Inhalt) enthalten. Weil die Reihenfolge wichtig ist. nicht sicher, ob das jetzt ein reales Szenario ist?

Ich mag die Index-Idee. Das ist ein guter Weg, es zu tun.

es ist nur wirklich sinnvoll, wenn die Dateien nur Mixins (kein Inhalt) enthalten.

Wir verwenden viel komponentenbasierte Entwicklung. Die meisten unserer Less-Komponenten sind nicht von anderen Dateien abhängig. Natürlich spielt die Reihenfolge in CSS und bei traditionelleren Designmustern eine Rolle, also denke ich, dass Sie Recht haben. Die meisten Leute würden das wahrscheinlich nicht so verwenden wie ich - was bedeutet, dass sie es wahrscheinlich nicht alle verwenden würden. Aber die Stylus-Index-Idee ist eine interessante Lösung dafür.

Dies ist keine Priorität, aber ich habe es gerade gesehen und wollte es als Referenz hinzufügen: https://github.com/chriseppstein/sass-globbing

Ich bin ein großer Sass-Fan und verwende ständig das Glob-Import-Plugin von Chris Eppstein (Teamkollegen, die auf Windows-Computern waren, konnten es nicht verwenden, also denken Sie daran).

Ich habe in LESS nach einem Äquivalent gesucht, sieht jemand so etwas?

Ja, ich bin auf jeden Fall ein Fan von diesem Plugin. Ich denke, jeder, der Globbing verwendet hat, weiß, wie schön es ist, damit zu arbeiten, aber es ist eines dieser Dinge, die "nice to have" zu sein scheinen, bis Sie es tatsächlich verwenden. Ich kann mir nicht vorstellen, jetzt ohne es zu versuchen, Builds zu machen. Sie können Assemble-less verwenden, es unterstützt Globbing (ich bin einer der Betreuer davon ...)

Übrigens @josephspens Ich habe dieses Projekt gestern erstellt, um SASS in LESS zu konvertieren. Als Proof-of-Concept habe ich die .scss -Dateien von Bootstrap-sass und Foundation in LESS konvertiert, beide Beispiele befinden sich im Ordner ./test/ . Ich war tatsächlich überrascht, wie nahe ich daran war, alle Bootstrap .scss -Dateien zurück in LESS zu konvertieren. Versuchen Sie, einen Unterschied zwischen den konvertierten Sass-Dateien und "nativen" Bootstrap-losen Dateien (v2.3.1) zu machen - es ist nicht vollständig, aber es spart viel Zeit.

Wenn Sie am Ende LESS für ein Projekt verwenden müssen, ist dies möglicherweise einen Besuch wert. Bei einigen Sprachfeatures sollte es nicht schwierig sein, den Prozess umzukehren, um LESS in SASS zu konvertieren

@lukeapage , Sie haben hier https://github.com/cloudhead/less.js/issues/1181#issuecomment -13546979 erwähnt, dass dies nur für Mixin-Bibliotheken nützlich wäre, und das war damals der Fall.

Da wir jetzt jedoch <strong i="8">@import</strong> (reference) haben, wird diese Funktion für jedes Stylesheet nützlich sein, auf das verwiesen werden kann.

Außerdem habe ich über das index.less -Konzept nachgedacht und eine Anfrage dafür erstellt: https://github.com/cloudhead/less.js/issues/1339. Aber ich glaube nicht, dass diese Merkmale sich gegenseitig ausschließen oder sogar notwendigerweise zusammenhängen. Globbing ermöglicht sowohl das Einschließen als auch das Ausschließen von Mustern, sodass Sie viel Kontrolle über die Globbing-Muster in der Import-Anweisung selbst haben.

Ich denke, die index.less-Funktion würde eine ganz andere Herausforderung lösen, die eher der Definition von Abhängigkeiten gleicht - wirklich nützlich für Module, Komponenten, Themen usw.

@jonschlinkert Dem stimme ich zu

@lukeapage können Sie mir einen Vorsprung geben, welche Stellen im Code geändert werden müssen (über Baum/Import/.js hinaus?), oder Vorschläge dafür, was ich beachten muss, z. ? Ich könnte es versuchen.

Das wäre ein tolles Feature. Ich habe derzeit eine große, lange Liste von Stylesheets in meiner bundle.less -Datei:

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

Es wäre sinnvoll, dies zu verdichten in:

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

oder ähnliches.

Mit Stylus können Sie das tun – <strong i="5">@import</strong> 'partials/*.styl – und ich habe ihn _die ganze Zeit_ verwendet. Wäre sehr daran interessiert, dies auch in Less zu haben, um mir die mühsame Aufgabe der manuellen Buchführung von Importen zu ersparen.

Dies + expliziter Import + Nicht-Duplikate wäre wirklich praktisch:

// 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 Ich würde gerne ein Plugin dafür machen, kannst du mir ein paar Hinweise geben, wo ich anfangen soll? Vielen Dank

Tut mir leid, Jon, dass ich deine erste Bitte um Hilfe verpasst habe, es war keine Absicht.
Ich denke, wir sollten es am besten in den Kern packen (weil ein Plugin das möchte
Überschreiben Sie den Standardzugriff auf Knotendateien - und Sie könnten erben und implementieren
aber das verhindert, dass ein anderes Plugin darauf aufbaut, es sei denn, dies ist der Fall
sehr vorsichtig), trotzdem würde ich Kern für den Import zumindest unterstützen
mehrere Dateien aus einem Import. Heute ist es möglich, das neue Bower-Plugin
tut es, aber es ist ein bisschen hacky. In Kontakt bleiben.

Ha, ich wusste nicht, dass ich bereits kommentiert hatte, also macht das zwei von uns lol. keine sorge ich weiß wie es ist.

Vielleicht ist es am besten, es in den Kern zu stecken

Klingt gut. Auch dabei helfe ich gerne. Keine Sorge so oder so.

Ok, habe nachgedacht und so würde ich es machen.

1. Fügen Sie dem abstrakten Dateimanager eine expandToFilelist hinzu. Standardmäßig sollte es
   gibt ein Array zurück, das den angegebenen Dateinamen enthält. Nicht sicher, ob es sollte
   synchron oder asynchron sein - spielt wahrscheinlich keine Rolle - asynchron machen?
2. Rufen Sie diese Funktion im Importmanager auf, sobald Sie einen Dateimanager haben. Dann
   Durchlaufen Sie alle Dateien und machen Sie bei jeder das, was Sie bei 1 gemacht haben.
3. Ich würde den Importmanager warten lassen, bis er die Ergebnisse aller Dateien hatte
   bevor Sie auf diese Weise zum Rückruf (der sich im Import-Besucher befindet) zurückrufen
   wir können eine konsistente Bestellung aufrechterhalten. Der Rückruf würde nun eine dauern
   Array, das alle Argumente enthält (z. B. muss der vollständige Dateiname einmal empfangen werden
   pro Datei).
4. Es kann zu Komplikationen beim Importieren von Besuchern im Kontext kommen - nicht
   sicher
5. Ein Import benötigt jetzt ein Array von Wurzeln (oder vielleicht ein Array von Wurzeln
   und Dateinamen). Es muss alle Wurzeln in seiner Bewertungsfunktion auswerten und
   einen kombinierten Stamm zurückgeben ... oder vielleicht einen neuen Regelsatz mit einem Array von erstellen
   die Evald-Wurzeln, wenn das funktioniert
6. Kompilieren und testen - sollte alles funktionieren
7. Ändern Sie den Knotendateimanager, um expandToFilelist zu implementieren, wenn der Dateiname
   enthält *
8. Fügen Sie Tests hinzu und fügen Sie Tests zu den Ausschlüssen im Abschnitt „Jasmin“ hinzu
   gruntfile, da wir sie nicht für Browser implementieren können
   Voila!

Ich wollte nur kommentieren, dass Sie als Problemumgehung gulp mit gulp-concat verwenden könnten, wenn Sie gulp als Build-Tool verwenden.

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

Dies ist effektiv meine Verzeichnisstruktur ... (obwohl meine Struktur ein wenig anders ist). Ich hatte gehofft, dass dies eine integrierte Funktion ist, da selbst wenn nur Knoten sehr nützlich wären.

Ich dachte nur, ich würde hier +1 geben ... es ist ein ziemlich häufiges Muster. Es gibt auch mehrere einfache Problemumgehungen, um das Bestellproblem zu vermeiden.

+1

Ich habe es nicht gesagt, aber ich würde die Option zu schätzen wissen (auch wenn sie nur serverseitig ist) ...

oh, die Ironie hier (die primäre Bibliothek wurde zu js, weil dieselbe Bibliothek dann für Server und Client verwendet werden konnte, nur um eine Nur-Server-Funktion hinzuzufügen).

Die Parsing-Engine kann die Parität beibehalten. Das ist immer noch ein riesiger Vorteil, der nichts mit dem zu tun hat, was wir diskutieren.

+1

Als ob es nicht schon genug gäbe: +1

+1 ernsthaft

+1

:+1:

+1

+1

+1

+1

:+1: bitte!

+1 Jesus würde sich über Wildcard-Unterstützung freuen.

Hey Leute, das Feedback ist großartig, aber +1 s werden diese Funktion nicht schneller machen. Es ist als zur Implementierung bereit markiert, und wenn es jemand implementiert, wird es implementiert.

+1 Jesus würde sich über Wildcard-Unterstützung freuen.

Ich denke, man kann mit Sicherheit sagen, dass es Less wäre, wenn Jesus einen Präprozessor wählen würde.

Da ich die Lösung dieses Problems nicht mehr erwarten kann, schreibe ich ein Plugin, das dies tut, und verwende es für meine Projekte. https://github.com/just-boris/less-plugin-glob
Weniger erlauben das Erstellen benutzerdefinierter Dateiladeprogramme für @imports . Ich habe dieses erstellt, das Importe mit Globs im Importpfad auflöst. Jedes Feedback wird geschätzt.

@just-boris Hallo, ich habe mich gefragt, wie ich das anders als mit NPM installieren könnte,

Bei der Verwendung von NPM erhalte ich die folgenden Fehler:

npm ERR! 404 „less-glob-plugin“ ist nicht in der npm-Registrierung.
npm ERR! 404 Sie sollten den Autor bitten, es zu veröffentlichen
npm ERR! 404
npm ERR! 404 Beachten Sie, dass Sie auch von a installieren können
npm ERR! 404-Tarball, Ordner oder http-URL oder Git-URL.

Vielen Dank im Voraus, das würde viel Herzschmerz ersparen.

@tonyflp , Entschuldigung, da war ein Tippfehler, du solltest less-plugin-glob installieren.
Less akzeptiert nur Plugins, die in der Notation less-plugin-* benannt sind

@just-boris Das hat super funktioniert, danke dafür.

Kein Update für diese Funktion?

just-boris ich benutze grunt-contrib-less sie haben ein Beispiel wie man Plugins wie folgt lädt:

Plugins: [
new (require('less-plugin-autoprefix'))({browsers: ["letzte 2 Versionen"]}),
new (require('less-plugin-clean-css'))(cleanCssOptions)
],

Wie würde ich Ihr wunderbares Plugin hier reinladen, damit es mit grunt-contrib-less funktioniert?

Big :+1: für die Funktion

@vospascal hat in meinem Repo geantwortet

;) danke @just-boris hab ich gesehen :-) :+1:

Warte immer noch auf diese Funktion :+1: . Danke, @just-boris.

@just-boris danke! Ich meine Dankeschön :-)

Dies wäre eine sehr nützliche Funktion für mich, da ich es vorziehe, alle meine Komponenten an einem Ort zu bündeln, anstatt alle Less-Dateien an einem einzigen Ort zu haben. Dies führt dazu, dass überall weniger Dateien vorhanden sind, was ein Albtraum wäre, eine manuelle Importliste zu führen.

Für alle, die Gulp zum Erstellen ihrer Less-Dateien verwenden, ich hatte Erfolg mit dem gulp-inject-Plugin, um automatisch die @import -Anweisungen in meiner Haupt-Less-Datei zu erstellen. Ich habe es hier kurz beschrieben: http://www.michaelbromley.co.uk/blog/425/automatic-import-of-lesssass-files-with-gulp

Um weniger zu globben, können Sie dies einfach in Ihrem Projekt ausführen.

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

fügen Sie dies dann zu Ihrer Gruntdatei in der Optionsgruppe Ihrer Less-Aufgabe hinzu

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

Das Ergebnis sieht in etwa so aus:

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

Jetzt können Sie in Ihre .less-Datei Folgendes schreiben:

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

Kam hierher und fragte sich, ob Glob-Importe unterstützt würden, aber da ich ein paar einzeilige Shell-Skripte anstelle von Grunt/Gulp für meinen Build-Prozess verwende. Am Ende habe ich nur find & cat verwendet und meine Quelle bleibt sauberer als jede der Alternativen. Weniger ist weiterhin großartig.

# 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

Wirklich überrascht, dass das noch nicht passiert ist. Gulp unterstützt zumindest diese Funktion.

@davidcalhoun Lies den ersten Beitrag in diesem Thread.

Soweit mir bekannt ist, kompilieren die meisten Leute ihre LESS-Dateien in CSS. Ich kenne nicht viele Websites, bei denen der Browser das LESS direkt interpretiert. Für diejenigen, die debuggen möchten, können Quellkarten verwendet werden

@just-boris Ich kann dein Plugin nicht zum Laufen bringen ... Ich nehme an, ich mache etwas falsch.

Hat es noch jemand zum Laufen bekommen?

Ich bekomme keine Fehler ... nur keine Ausgabe, wenn ich versuche, Globbing zu verwenden.

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 Es ist besser, das Problem im eigenen Repository des Plugins anzusprechen.

@sieben-phasen-max :+1:

Ich hatte gehofft, ein größeres Publikum zu erreichen, aber Sie haben recht.

@seven-phases-max Du kannst das glob-plugin nicht in less integrieren?

Es integriert sich gut, aber scheint nichts zu tun.

Wenn ich das Plugin auskommentiere, werden meine weniger korrekten Fehler beim Import angezeigt
Globus.

Wenn ich es wieder einsetze, hört der Fehler auf.

Ich gehe also davon aus, dass es etwas bringt.

Am Mittwoch, den 5. August 2015, Mattia Astorino [email protected]
schrieb:

@SpencerCarstens https://github.com/SpencerCarstens Sie können nicht integrieren
das glob-plugin drinnen weniger?

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an
https://github.com/less/less.js/issues/1181#issuecomment -128262749.

Herzlich,

Spencer Carstens

@equinusocio

Sie können das glob-plugin nicht in less integrieren?

Wenn Sie meinen, "warum sollte man das nicht in den Kern packen" ... dann, nun ja, der aktuelle Less-Ansatz (weniger oder mehr in mehreren Diskussionen in verschiedenen Threads hier eingerichtet) lautet ungefähr: "Legen Sie niemals ein Feature in den Kern, _bevor_ es absolut und völlig offensichtlich wird, gehört das Feature dorthin und es gibt keine anderen Möglichkeiten". Das heißt, wenn etwas als Plugin implementiert werden kann, _sollte_ es als Plugin implementiert werden (deshalb wurde beispielsweise sogar die langlebige clean-css -Funktion vom Kern in das entsprechende Plugin verschoben). .

@seven-phases-max ok, danke. Ich mag das.

Schließen wie im Plugin von @just-boris implementiert.

+1

+1

Sprechen Sie über die Wiederbelebung alter Threads

Was sollen diese +1 bedeuten? Funktioniert das Plugin nicht?

Das +1 zeigt an, dass Sie es auch wollen oder unterstützen

Was unterstützen? Sag ich doch. Dies wurde behoben und das Problem ist geschlossen. Ich frage also, wofür wird +1 gegeben?

Ich bekomme diese E-Mails seit über 2 Jahren, was ist hier los?