Less.js: Mendukung globbing file untuk @imports

Keren .. meskipun hanya node (bukan browser) dan tidak berpikir itu akan membantu yang lain
masalah. Mungkin berguna saya kira .. biasanya Anda akan memiliki rantai ketergantungan
jadi Anda tidak ingin semuanya dalam urutan abjad.

Ya, tidak ada cara bagi browser untuk mengetahui file apa yang diminta, jadi sepertinya bukan pemula.

baik saya tidak akan mengesampingkannya hanya karena itu hanya akan berlaku untuk node tetapi juga saya tidak melihatnya sebagai permintaan fitur yang sangat penting.

@agatronic mengenai rantai ketergantungan, saya baru saja berbicara dengan seseorang tentang hal yang sama di pertemuan simpul kemarin. Saya pikir ini adalah sesuatu yang berguna untuk perpustakaan komponen/modul, mixin dll seperti pada contoh. Dan ya simpul saja adalah apa yang saya pikirkan.

Saya baru saja membaca bahwa stylus memungkinkan Anda menentukan direktori dan jika Anda melakukannya, stylus akan mencari index.sty - Saya suka itu.

untuk mengimpor setiap file dalam direktori, itu hanya sangat berguna jika file hanya berisi mixin (tidak ada konten) .. karena urutan itu penting. tidak yakin itu skenario kehidupan nyata sekarang?

Saya suka ide indeks. Itu cara yang bagus untuk melakukannya.

itu hanya sangat berguna jika file hanya berisi mixin (tidak ada konten).

Kami menggunakan banyak pengembangan berbasis komponen. Sebagian besar komponen Less kami tidak memiliki ketergantungan pada file lain. Tentu saja urutan itu penting dalam CSS dan dengan pola desain yang lebih tradisional, jadi saya pikir Anda benar. Kebanyakan orang mungkin tidak akan menggunakan ini seperti yang saya lakukan - yang berarti mereka mungkin tidak akan menggunakan semuanya. Tapi ide indeks stylus adalah solusi yang menarik untuk ini.

Ini bukan prioritas tetapi saya baru saja melihat ini dan ingin menambahkannya sebagai referensi: https://github.com/chriseppstein/sass-globbing

Saya penggemar berat Sass, dan saya menggunakan plugin pengimpor glob Chris Eppstein sepanjang waktu (rekan tim yang menggunakan mesin windows tidak dapat menggunakannya, jadi ingatlah itu).

Saya telah mencari yang setara di KURANG, ada yang melihat yang seperti itu?

Ya, saya penggemar plugin ini pasti. Saya pikir siapa pun yang telah menggunakan globbing tahu betapa menyenangkannya bekerja, tetapi itu adalah salah satu dari hal-hal yang tampaknya "menyenangkan untuk dimiliki" sampai Anda benar-benar menggunakannya. Saya tidak dapat membayangkan mencoba membuat bangunan tanpanya sekarang. Anda dapat menggunakan assemble-less , ini mendukung globbing (saya salah satu pengelolanya ...)

Btw @josephspens Saya membuat proyek ini kemarin untuk mengonversi SASS ke KURANG. Sebagai bukti konsep, saya mengonversi file .scss dari bootstrap-sass dan foundation ke KURANG, kedua contoh ada di folder ./test/ . Saya sebenarnya terkejut melihat seberapa dekat saya untuk mengonversi semua file Bootstrap .scss kembali ke KURANG. Coba lakukan perbedaan antara file sass yang dikonversi dan file bootstrap less "asli" (v2.3.1) - fitur ini tidak lengkap, tetapi menghemat banyak waktu.

Jika Anda akhirnya harus menggunakan KURANG pada sebuah proyek, ini mungkin layak untuk dicoba. Untuk beberapa fitur bahasa, tidak sulit untuk membalikkan proses untuk mengonversi KURANG ke SASS

@lukeapage , Anda menyebutkan di sini https://github.com/cloudhead/less.js/issues/1181#issuecomment -13546979 bahwa ini hanya akan berguna untuk mixin libs, dan itu benar pada saat itu.

Namun, sekarang kita memiliki <strong i="8">@import</strong> (reference) , fitur ini akan berguna untuk setiap stylesheet yang dapat direferensikan.

Juga, saya memikirkan konsep index.less dan membuat permintaan untuk itu: https://github.com/cloudhead/less.js/issues/1339. Tapi menurut saya fitur-fitur ini tidak saling eksklusif atau bahkan harus terkait. Globbing memungkinkan untuk menyertakan dan mengecualikan pola, jadi Anda memiliki banyak kontrol dari pola globbing dalam pernyataan impor itu sendiri.

Saya pikir fitur index.less akan menyelesaikan tantangan yang sama sekali berbeda, yang lebih seperti mendefinisikan dependensi - sangat berguna untuk modul, komponen, tema, dll.

@jonschlinkert saya setuju

@lukeapage dapatkah Anda memberi saya permulaan tentang tempat mana dalam kode yang perlu dimodifikasi (di luar pohon/impor/.js?), atau saran untuk apa yang perlu saya pertimbangkan, misalnya apakah ini khusus untuk simpul, dll. ? Saya mungkin akan mencobanya.

Ini akan menjadi fitur yang bagus. Saat ini saya memiliki daftar panjang besar stylesheet di file bundle.less saya:

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

Ini akan berguna untuk menyingkat ini menjadi:

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

atau serupa.

Stylus memungkinkan Anda melakukan ini -- <strong i="5">@import</strong> 'partials/*.styl -- dan saya menggunakannya _sepanjang waktu. Akan sangat tertarik memiliki ini di Kurang juga, untuk meringankan saya dari tugas membosankan pembukuan impor secara manual.

+ Impor eksplisit + non-duplikat ini akan sangat berguna:

// 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 Saya ingin membuat plugin untuk ini, dapatkah Anda memberi saya beberapa petunjuk tentang mulai dari mana? Terima kasih

Maaf Jon bahwa saya melewatkan permintaan bantuan pertama Anda, itu tidak disengaja.
Saya pikir kami mungkin lebih baik memasukkannya ke dalam inti (karena sebuah plugin ingin
menimpa akses file node standar - dan Anda dapat mewarisi dan mengimplementasikan
tapi itu menghentikan plugin lain untuk membangun di atasnya, kecuali jika itu
sangat hati-hati), bagaimanapun saya setidaknya akan menambahkan dukungan ke inti untuk mengimpor ing
beberapa file dari satu impor. Itu mungkin hari ini, plugin bower baru
melakukannya, tapi itu sedikit hacky. Akan berhubungan.

Ha, saya tidak sadar saya sudah berkomentar, jadi itu membuat kami berdua lol. tidak ada kekhawatiran sama sekali saya tahu bagaimana itu.

mungkin lebih baik memasukkannya ke dalam inti

Kedengarannya bagus. Saya akan senang untuk membantu dengan itu juga. Tidak ada kekhawatiran.

Ok, sudah berpikir dan ini adalah bagaimana saya akan melakukannya.

1. Tambahkan expandToFilelist ke manajer file abstrak. Secara default seharusnya
   mengembalikan array yang berisi nama file yang diberikan. Tidak yakin apakah harus
   sinkron atau asinkron - mungkin tidak masalah - buat asinkron?
2. Di pengelola impor, panggil fungsi itu setelah Anda memiliki pengelola file. Kemudian
   loop melalui semua file dan lakukan pada masing-masing apa yang Anda lakukan pada 1.
3. Saya akan meminta manajer impor menunggu sampai ada hasil dari semua file
   sebelum menelepon kembali ke panggilan balik (yang di impor pengunjung) seperti itu
   kami dapat mempertahankan pemesanan yang konsisten. Panggilan kembali sekarang akan mengambil
   array yang berisi semua argumen (mis. nama file lengkap harus diterima sekali
   per berkas).
4. Mungkin ada komplikasi dalam pengunjung impor di sekitar konteks - bukan
   Tentu
5. Impor sekarang akan mengambil larik akar (atau mungkin larik akar
   dan nama file). Itu perlu mengevaluasi semua akar dalam fungsi evaluasinya dan
   kembalikan root gabungan.. atau mungkin buat kumpulan aturan baru menggunakan larik
   akar evald, jika itu berhasil
6. Kompilasi dan uji - semua harus bekerja
7. Ubah pengelola file simpul untuk mengimplementasikan expandToFilelist jika nama file
   mengandung *
8. Tambahkan tes dan tambahkan tes ke pengecualian di bagian Jasmine dari
   gruntfile, karena kami tidak dapat menerapkan untuk browser
   Voila!

Hanya ingin berkomentar, sebagai solusinya, Anda dapat menggunakan gulp dengan gulp-concat jika Anda menggunakan gulp sebagai alat build Anda.

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

Ini secara efektif struktur direktori saya... (walaupun, struktur saya sedikit berbeda). Saya berharap ini adalah fitur bawaan, karena meskipun node-only akan sangat berguna.

Hanya berpikir saya akan memberi +1 di sini... ini pola yang cukup umum. Ada juga beberapa solusi mudah untuk menghindari masalah pesanan.

+1

Saya tidak mengatakannya, tetapi saya menghargai opsi (walaupun hanya sisi server)...

oh ironi di sini (library primer menjadi js karena library yang sama kemudian dapat digunakan server dan klien, hanya untuk menambahkan fitur khusus server).

Mesin parsing dapat mempertahankan paritas. Itu masih merupakan keuntungan besar yang tidak ada hubungannya dengan apa yang sedang kita diskusikan.

+1

Seolah-olah belum cukup: +1

+1 serius

+1

:+1:

+1

+1

+1

+1

:+1: tolong!

+1 yesus akan senang dengan dukungan wildcard.

Hai teman-teman, umpan baliknya bagus, tetapi +1 s tidak akan membuat fitur ini terjadi lebih cepat. Itu ditandai sebagai siap untuk diimplementasikan, dan ketika seseorang mengimplementasikannya, itu akan diimplementasikan.

+1 yesus akan senang dengan dukungan wildcard.

Saya pikir aman untuk mengatakan bahwa jika Yesus memilih preprocessor, itu akan menjadi Less.

Karena saya tidak bisa menunggu penyelesaian masalah ini lagi, saya menulis plugin yang melakukannya, dan menggunakannya untuk proyek saya. https://github.com/just-boris/less-plugin-glob
Lebih sedikit izinkan untuk membuat pemuat file khusus untuk @imports . Saya telah membuat yang ini yang menyelesaikan impor dengan gumpalan di jalur impor. Setiap saran akan dihargai.

@just-boris Hai, saya bertanya-tanya bagaimana saya bisa menginstal ini selain dengan NPM,

Saya mendapatkan kesalahan berikut saat menggunakan NPM:

npm ERR! 404 'less-glob-plugin' tidak ada dalam registri npm.
npm ERR! 404 Anda harus mengganggu penulis untuk menerbitkannya
npm ERR! 404
npm ERR! 404 Perhatikan bahwa Anda juga dapat menginstal dari a
npm ERR! 404 tarball, folder, atau url http, atau url git.

Terima kasih sebelumnya, ini akan menghemat banyak sakit hati.

@tonyflp , maaf, ada kesalahan ketik, Anda harus menginstal less-plugin-glob .
Less hanya menerima plugin yang diberi nama dalam notasi less-plugin-*

@just-boris Itu bekerja dengan baik, terima kasih untuk ini.

Tidak ada pembaruan untuk fitur ini?

just-boris saya menggunakan grunt-contrib-less mereka punya contoh cara memuat plugin seperti ini:

plugin: [
baru (memerlukan('less-plugin-autoprefix'))({browsers: ["last 2 version"]}),
baru (memerlukan('less-plugin-clean-css'))(cleanCssOptions)
],

Bagaimana saya memuat plugin Anda yang luar biasa di sini sehingga berfungsi dengan grunt-contrib-less?

Besar :+1: untuk fiturnya

@vospascal menjawab di repo saya

;) thnx @just-boris saya melihat :-) :+1:

Masih menunggu fitur ini :+1: . Terima kasih, @just-boris.

@just-boris terima kasih! maksud saya terima kasih :-)

Ini akan menjadi fitur yang sangat berguna bagi saya, karena saya lebih memilih untuk menggabungkan semua komponen saya di satu tempat, daripada memiliki semua file yang lebih sedikit di satu lokasi. Ini mengarah ke Lebih sedikit file yang ada di semua tempat, yang akan menjadi mimpi buruk untuk mempertahankan daftar impor manual.

Bagi siapa saja yang menggunakan Gulp untuk membuat file Less mereka, saya telah berhasil menggunakan plugin gulp-inject untuk secara otomatis membuat pernyataan @import di file Less utama saya. Saya menulisnya secara singkat di sini: http://www.michaelbromley.co.uk/blog/425/automatic-import-of-lesssass-files-with-gulp

Untuk globbing kurang, Anda dapat menjalankan ini dengan sederhana di proyek Anda,

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

lalu tambahkan ini ke Gruntfile Anda di grup opsi dari tugas Anda yang lebih sedikit

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

Hasilnya adalah seperti ini:

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

Sekarang di file .less Anda, Anda dapat menulis ini:

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

Datang ke sini bertanya-tanya apakah impor glob didukung, tetapi karena saya menggunakan beberapa skrip Shell satu baris alih-alih grunt/gulp untuk proses build saya. Saya akhirnya hanya menggunakan find & cat dan sumber saya tetap lebih bersih daripada alternatif mana pun. Kurang terus menjadi luar biasa.

# 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

Benar-benar terkejut ini belum terjadi sekarang. Gulp memiliki dukungan untuk fitur ini setidaknya.

@davidcalhoun Baca posting pertama di utas ini.

Sama, sejauh yang saya ketahui, kebanyakan orang mengkompilasi file KURANG mereka ke dalam CSS , saya tidak tahu banyak situs yang memiliki browser yang menafsirkan KURANG secara langsung? Bagi mereka yang ingin men-debug, dapat menggunakan peta sumber

@just-boris Saya tidak bisa membuat plugin Anda berfungsi... Saya berasumsi saya melakukan sesuatu yang salah.

Apakah ada orang lain yang membuatnya bekerja?

Tidak mendapatkan kesalahan ... hanya tidak ada output ketika saya mencoba menggunakan globbing.

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 Lebih baik mengangkat masalah di repositori plugin sendiri.

@seven-phases-max :+1:

Saya berharap untuk menjangkau audiens yang lebih besar, tetapi Anda benar.

@seven-phases-max Anda tidak dapat mengintegrasikan plugin glob di dalam less?

Ini terintegrasi dengan baik, tetapi sepertinya tidak melakukan apa-apa.

Jika saya mengomentari plugin, kesalahan saya kurang benar pada impor
globing

Ketika saya memasukkannya kembali, kesalahan berhenti.

Jadi, saya berasumsi itu melakukan sesuatu.

Pada hari Rabu, 5 Agustus 2015, Mattia Astorino [email protected]
menulis:

@SpencerCarstens https://github.com/SpencerCarstens Anda tidak dapat mengintegrasikan
plugin glob di dalam kurang?

—
Balas email ini secara langsung atau lihat di GitHub
https://github.com/less/less.js/issues/1181#issuecomment -128262749.

dengan hormat,

Spencer Carstens

@equinusocio

Anda tidak dapat mengintegrasikan plugin glob di dalam less?

Jika maksud Anda "mengapa tidak memasukkan ini ke dalam inti"... Kemudian, yah, pendekatan Less saat ini (kurang lebih atau lebih diatur dalam beberapa diskusi di berbagai utas di sini) kira-kira: "tidak pernah menempatkan fitur ke inti, _sebelum_ itu menjadi benar-benar dan benar-benar terbukti bahwa fitur itu ada di sana dan tidak ada cara lain". Artinya, jika sesuatu dapat diimplementasikan sebagai plugin, itu _harus_ diimplementasikan sebagai plugin (itulah sebabnya misalnya, bahkan fasilitas clean-css yang berumur panjang dipindahkan dari inti ke plugin yang sesuai) .

@seven-phases-max ok, terima kasih. Saya suka ini.

Penutupan seperti yang diterapkan di plugin @just-boris .

+1

+1

Bicara tentang menghidupkan kembali utas lama

Apa yang seharusnya ditunjukkan oleh +1 ini? Apakah plugin tidak bisa diterapkan?

+1 menunjukkan bahwa Anda menginginkan atau mendukungnya juga

Mendukung apa? Itulah yang saya katakan. Ini telah diatasi dan masalah ditutup. Jadi saya bertanya apa yang diberi +1?

Saya telah mendapatkan email ini selama lebih dari 2 tahun apa masalahnya di sini ..