Less.js: دعم ملف globbing لـimports

رائع .. على الرغم من أنه عقدة فقط (وليس متصفح) ولا أعتقد أنه سيساعد الآخرين
مسائل. أعتقد أنه يمكن أن يكون مفيدًا .. عادة ما يكون لديك سلسلة تبعية
لذلك لا تريد كل شيء بالترتيب الأبجدي.

نعم ، لا توجد طريقة للمتصفح لمعرفة الملفات المطلوب طلبها ، لذلك يبدو أنها ليست بداية.

حسنًا ، لن أستبعد ذلك لمجرد أنه سيطبق فقط على العقدة ولكني أيضًا لا أرى أنه طلب ميزة مهمة بشكل خاص.

agatronic فيما يتعلق بسلسلة التبعية ، كنت أتحدث للتو إلى شخص ما عن نفس الشيء في لقاء العقدة بالأمس. أعتقد أن هذا شيء مفيد لمكتبات المكونات / الوحدة ، والمزج ، وما إلى ذلك كما في المثال. نعم ، كانت العقدة فقط ما كنت أفكر فيه.

لقد قرأت للتو أن القلم يسمح لك بتحديد دليل وإذا قمت بذلك فإنه يبحث عن index.sty - أحب ذلك.

أما بالنسبة لاستيراد كل ملف في دليل ، فهو مفيد حقًا فقط إذا كانت الملفات تحتوي فقط على mixins (بدون محتوى) .. لأن الترتيب مهم. ألست متأكدًا من أن هذا هو السيناريو الواقعي الآن؟

أنا أحب فكرة الفهرس. هذه طريقة جيدة للقيام بذلك.

إنه مفيد حقًا فقط إذا كانت الملفات تحتوي فقط على mixins (بدون محتوى).

نحن نستخدم الكثير من التطوير القائم على المكونات. معظم المكونات الأقل لدينا لا تعتمد على الملفات الأخرى. بالطبع لا يهم الترتيب في CSS ومع أنماط التصميم الأكثر تقليدية ، لذلك أعتقد أنك على حق. ربما لن يستخدم معظم الناس هذا بالطريقة التي كنت سأستخدمها - مما يعني أنهم لن يستخدموها جميعًا على الأرجح. لكن فكرة مؤشر القلم هي حل مثير للاهتمام لهذا الأمر.

هذه ليست أولوية لكنني رأيت هذا للتو وأردت إضافته كمرجع: https://github.com/chriseppstein/sass-globbing

أنا من أشد المعجبين بـ Sass ، وأستخدم المكوّن الإضافي لاستيراد الكرة الأرضية الخاص بـ Chris Eppstein طوال الوقت (لم يتمكن زملائي الذين كانوا على أجهزة Windows من استخدامه ، لذا ضع ذلك في الاعتبار).

لقد كنت أبحث عن معادل في LESS ، هل يرى أي شخص شيئًا مثله؟

نعم أنا معجب بهذا البرنامج المساعد بالتأكيد. أعتقد أن أي شخص استخدم globbing يعرف كم هو لطيف العمل معه ، لكنه أحد تلك الأشياء التي يبدو أنه "من الجيد امتلاكها" حتى تستخدمها بالفعل. لا أستطيع أن أتخيل محاولة إنشاء تصميمات بدونها الآن. يمكنك استخدام التجميع الأقل ، فهو يدعم التذبذب (أنا أحد المشرفين عليه ...)

راجع للشغل josephspens لقد أنشأت هذا المشروع بالأمس لتحويل SASS إلى LESS. كدليل على المفهوم ، قمت بتحويل ملفات .scss من bootstrap-sass و Foundation إلى LESS ، كلا المثالين موجودان في المجلد ./test/ . لقد فوجئت بالفعل بمدى اقترابي من تحويل جميع ملفات Bootstrap .scss مرة أخرى إلى LESS. حاول إجراء فرق بين ملفات sass المحولة وملفات bootstrap "الأصلية" أقل (v2.3.1) - إنها ليست ميزة كاملة ، ولكنها توفر الكثير من الوقت.

إذا انتهى بك الأمر إلى استخدام LESS في مشروع ، فقد يكون هذا أمرًا يستحق المراجعة. بالنسبة لبعض ميزات اللغة ، لن يكون من الصعب عكس العملية لتحويل LESS إلى SASS

lukeapage ، لقد ذكرت هنا https://github.com/cloudhead/less.js/issues/1181#issuecomment -13546979 أن هذا لن يكون مفيدًا إلا لـ mixin libs ، وكان هذا صحيحًا في ذلك الوقت.

ومع ذلك ، بعد أن أصبح لدينا الآن <strong i="8">@import</strong> (reference) ، ستكون هذه الميزة مفيدة لكل ورقة أنماط يمكن الرجوع إليها.

أيضًا ، فكرت في مفهوم index.less وأنشأت طلبًا له: https://github.com/cloudhead/less.js/issues/1339. لكنني لا أعتقد أن هذه الميزات متنافية أو مرتبطة بالضرورة. يسمح Globbing لكل من أنماط التضمين والاستبعاد ، بحيث يكون لديك قدر كبير من التحكم من الأنماط المتتالية في بيان الاستيراد نفسه.

أعتقد أن ميزة index.less ستحل تحدي الاختلاف تمامًا ، والذي يشبه إلى حد كبير تحديد التبعيات - وهو مفيد حقًا للوحدات والمكونات والموضوعات وما إلى ذلك.

jonschlinkert أوافق

lukeapage ، هل يمكنك أن تعطيني السبق في تحديد الأماكن في الكود التي يجب تعديلها (بخلاف الشجرة / الاستيراد / .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/*';

أو مشابه.

يتيح لك Stylus القيام بذلك - <strong i="5">@import</strong> 'partials/*.styl - وكنت أستخدمه _ all_ كل الوقت. سأكون مهتمًا جدًا بالحصول على هذا في 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 أود عمل مكون إضافي لهذا ، هل يمكن أن تعطيني بعض المؤشرات حول من أين أبدأ؟ شكرا

آسف جون لأنني فاتني طلبك الأول للمساعدة ، لم يكن مقصودًا.
أعتقد أننا قد يكون من الأفضل وضعه في جوهره (لأن المكون الإضافي قد يرغب في ذلك
تجاوز الوصول إلى ملف العقدة القياسي - ويمكنك أن ترث وتنفيذه
ولكن هذا يمنع مكونًا إضافيًا آخر من البناء فوقه ، ما لم يكن كذلك
دقيق جدًا) ، على أي حال سأضيف دعمًا إلى core لاستيراد جي
ملفات متعددة من عملية استيراد واحدة. إنه ممكن اليوم ، المكون الإضافي الجديد bower
يفعل ذلك ، لكنه قليل الاختراق. سوف نكون على اتصال.

ها ، لم أدرك أنني قد علقت بالفعل ، وهذا يجعل اثنين منا لول. لا تقلق على الإطلاق أنا أعرف كيف هو.

قد يكون من الأفضل وضعه في الصميم

يبدو ذلك جيدا. سأكون سعيدًا للمساعدة في ذلك أيضًا. لا تقلق في كلتا الحالتين.

حسنًا ، كنت أفكر وهذه هي الطريقة التي كنت أفعل بها ذلك.

1. أضف expandToFilelist إلى abstract file manager. بشكل افتراضي ينبغي
   إرجاع مصفوفة تحتوي على اسم الملف المعطى. لست متأكدا إذا كان ينبغي
   تكون متزامنة أو غير متزامنة - ربما لا يهم - اجعلها غير متزامنة؟
2. في مدير الاستيراد ، استدع هذه الوظيفة بمجرد أن يكون لديك مدير ملفات. ثم
   حلقة عبر جميع الملفات والقيام بكل ما كنت تفعله على 1.
3. كان لدي مدير استيراد ينتظر حتى تظهر النتائج من جميع الملفات
   قبل معاودة الاتصال (وهو في استيراد الزائر) بهذه الطريقة
   يمكننا الحفاظ على ترتيب متسق. ستستغرق معاودة الاتصال الآن
   مجموعة تحتوي على جميع الوسائط (على سبيل المثال ، يجب استلام اسم الملف بالكامل مرة واحدة
   لكل ملف).
4. قد تكون هناك تعقيدات في استيراد الزائر حول السياق - لا
   بالتأكيد
5. سيأخذ الاستيراد الآن مصفوفة من الجذور (أو ربما مصفوفة من الجذور
   وأسماء الملفات). سيحتاج إلى تقييم جميع الجذور في دالة EV و
   إرجاع جذر مشترك .. أو ربما إنشاء مجموعة قواعد جديدة باستخدام مصفوفة من
   جذور ايفالد ، إذا كان ذلك يعمل
6. تجميع واختبار - يجب أن يعمل كل شيء
7. قم بتغيير مدير ملف العقدة لتطبيق expandToFilelist إذا كان اسم الملف
   يحتوي على *
8. اضافة الاختبارات واضافة الفحوصات الى المستبعدين في قسم الياسمين
   gruntfile ، نظرًا لأننا لا نستطيع تنفيذ المتصفح
   هاهو!

أردت فقط التعليق ، كحل بديل ، يمكنك استخدام gulp مع gulp-concat إذا كنت تستخدم gulp كأداة بناء.

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 s لن تجعل هذه الميزة تحدث بشكل أسرع. تم وضع علامة على أنه جاهز للتنفيذ ، وعندما ينفذه شخص ما ، فسيتم تنفيذه.

سيكون +1 يسوع سعيدًا بدعم أحرف البدل.

أعتقد أنه من الآمن أن نقول إنه إذا اختار يسوع معالجًا سابقًا ، فسيكون أقل.

نظرًا لأنني لا أستطيع الانتظار لحل هذه المشكلة بعد الآن ، أكتب مكونًا إضافيًا يقوم بذلك ، واستخدمه لمشاريعي. https://github.com/just-boris/less-plugin-glob
أقل تسمح بإنشاء برامج تحميل ملفات مخصصة مقابل @imports . لقد قمت بإنشاء هذا الذي يحل عمليات الاستيراد مع globs في مسار الاستيراد. سيكون موضع تقدير أي ردود فعل.

@ just-boris مرحبًا ، كنت أتساءل كيف يمكنني تثبيت هذا بخلاف NPM ،

تظهر لي أخطاء المتابعة عند استخدام NPM:

npm خطأ! 404 "less-glob-plugin" غير موجود في سجل npm.
npm خطأ! 404 يجب عليك خطأ المؤلف لنشره
npm خطأ! 404
npm خطأ! 404 لاحظ أنه يمكنك أيضًا التثبيت من ملف
npm خطأ! 404 tarball أو folder أو http url أو git url.

شكرًا مقدمًا ، سيوفر هذا قدرًا كبيرًا من وجع القلب.

tonyflp ، آسف ، كان هناك خطأ إملائي ، يجب عليك تثبيت less-plugin-glob .
لا يقبل الأقل سوى المكونات الإضافية المسماة بـ less-plugin-*

@ just-boris لقد عمل هذا بشكل رائع ، شكرًا على هذا.

لا يوجد تحديث لهذه الميزة؟

just-boris أنا أستخدم grunt-Contrib-less لديهم مثال على كيفية تحميل البرنامج المساعد مثل هذا:

المكونات الإضافية: [
جديد (يتطلب ('less-plugin-autoprefix')) ({متصفحات: ["آخر نسختين"]}) ،
جديد (يتطلب ('less-plugin-clean-css')) (cleanCssOptions)
] ،

كيف يمكنني تحميل المكون الإضافي الرائع الخاص بك هنا بحيث يعمل مع grunt-Contrib-less؟

كبير: +1: للميزة

vospascal أجاب في الريبو الخاص بي

؛) thnx @ just-boris لقد رأيت :-): +1:

لا تزال تنتظر هذه الميزة: +1:. شكرًا ، @ just-boris.

@ Just-boris شكرا! أنا أقصد شكرا لك :-)

ستكون هذه ميزة مفيدة جدًا بالنسبة لي ، لأنني أفضل تجميع جميع مكوناتي في مكان واحد ، بدلاً من وضع جميع الملفات الأقل في مكان واحد. هذا يؤدي إلى وجود عدد أقل من الملفات في كل مكان ، مما قد يكون كابوسًا للاحتفاظ بقائمة استيراد يدوية لـ.

بالنسبة لأي شخص يستخدم Gulp لإنشاء ملفات Less الخاصة به ، فقد نجحت في استخدام المكون الإضافي gulp-injection لإنشاء عبارات @import تلقائيًا في ملف Less الرئيسي الخاص بي. قمت بكتابة نص قصير عنها هنا: http://www.michaelbromley.co.uk/blog/425/automatic-import-of-lesssass-files-with-gulp

للحصول على القليل من المال ، يمكنك تشغيل هذا ببساطة في مشروعك ،

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

ثم أضف هذا إلى 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/**/*";
···

جئت إلى هنا لأتساءل عما إذا كانت عمليات استيراد الكرة الأرضية مدعومة ، ولكن بما أنني أستخدم نصوص برمجية من سطر واحد بدلاً من grunt / gulp لعملية البناء الخاصة بي. انتهى بي الأمر باستخدام 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 لا يمكنني تشغيل المكون الإضافي الخاص بك ... أفترض أنني أفعل شيئًا خاطئًا.

هل حصل عليه أي شخص آخر للعمل؟

عدم الحصول على أي أخطاء ... فقط لا إخراج عندما أحاول استخدام 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 من الأفضل إثارة المشكلة في مستودع البرنامج المساعد.

@ سبع مراحل كحد أقصى: +1:

كنت أتمنى الوصول إلى جمهور أكبر ، لكنك على حق.

@ seven-stage-max لا يمكنك دمج البرنامج المساعد glob داخل أقل؟

إنه يتكامل بشكل جيد ، لكن لا يبدو أنه يفعل أي شيء.

إذا قمت بالتعليق على المكون الإضافي ، فإن أخطائي الأقل دقة في الاستيراد
الكرة الأرضية.

عندما أعدته مرة أخرى ، يتوقف الخطأ.

لذا ، أفترض أنها تفعل شيئًا ما.

يوم الأربعاء 5 أغسطس 2015 ، Mattia Astorino [email protected]
كتب:

SpencerCarstens https://github.com/SpencerCarstens لا يمكنك الاندماج
البرنامج المساعد glob داخل أقل؟

-
قم بالرد على هذا البريد الإلكتروني مباشرة أو قم بعرضه على GitHub
https://github.com/less/less.js/issues/1181#issuecomment -128262749.

بحرارة

سبنسر كارستينس

تضمين التغريدة

لا يمكنك دمج البرنامج المساعد glob داخل أقل؟

إذا كنت تقصد "لماذا لا تضع هذا في الجوهر" ... إذن ، حسنًا ، النهج الحالي Less (أقل أو أكثر تم إعداده في العديد من المناقشات عبر مختلف المواضيع هنا) هو تقريبًا: "لا تضع أبدًا ميزة في الصميم ، _ قبل ذلك يصبح من الواضح تمامًا وبشكل كامل أن الميزة تنتمي هناك ولا توجد طرق أخرى ". هذا يعني أنه إذا كان من الممكن تنفيذ شيء ما كمكوِّن إضافي ، فيجب أن يتم تنفيذه كمكوِّن إضافي (لهذا السبب ، على سبيل المثال ، تم نقل المنشأة التي تعيش طويلاً في النواة clean-css من المركز الأساسي إلى المكوِّن الإضافي المقابل) .

@ سبع مراحل كحد أقصى ، شكرًا. أحب هذا.

الإغلاق كما هو مطبق في المكون الإضافي @ just-boris .

+1

+1

تحدث عن احياء الخيوط القديمة

ما الذي يفترض أن تشير إليه إجراءات +1؟ هل البرنامج المساعد غير عملي؟

يشير +1 إلى أنك تريده أو تدعمه أيضًا

دعم ماذا؟ هذا ما اقوله. تمت معالجة هذا الأمر وأغلقت القضية. لذلك أنا أسأل ما هو إجراء 1+؟

لقد تلقيت رسائل البريد الإلكتروني هذه لأكثر من عامين ، فما الصفقة هنا ..