Less.js: @imports에 대한 지원 파일 글로빙

멋진 .. 노드 만 (브라우저가 아님) 다른 사람들에게 도움이 될 것이라고 생각하지 않습니다.
문제. 유용할 것 같습니다. 일반적으로 종속성 체인이 있을 것입니다.
그래서 당신은 모든 것을 알파벳 순서로 원하지 않을 것입니다.

예, 브라우저가 어떤 파일을 요청할지 알 방법이 없으므로 시작하지 않는 것처럼 보입니다.

노드에만 적용된다고 해서 배제하지는 않겠지만 특별히 중요한 기능 요청으로 보지는 않습니다.

@agatronic 종속성 체인에 대해 어제 노드 밋업에서 동일한 내용에 대해 누군가와 이야기를 나누었습니다. 예제와 같이 컴포넌트/모듈 라이브러리, 믹스인 등에 유용한 기능이라고 생각합니다. 그리고 네 노드는 내가 생각한 것뿐이었습니다.

방금 스타일러스를 사용하여 디렉토리를 지정할 수 있다는 것을 읽었고 그렇게 하면 index.sty 를 찾습니다.

디렉토리의 모든 파일을 가져오는 경우 파일에 믹스인(내용 없음)만 포함된 경우에만 정말 유용합니다. 순서가 중요하기 때문입니다. 지금 실제 시나리오가 확실하지 않습니까?

인덱스 아이디어가 마음에 듭니다. 좋은 방법입니다.

파일에 믹스인(콘텐츠 없음)만 포함된 경우에만 정말 유용합니다.

우리는 컴포넌트 기반 개발을 많이 사용합니다. 대부분의 Less 구성 요소는 다른 파일에 대한 종속성이 없습니다. 물론 CSS와 보다 전통적인 디자인 패턴에서는 순서가 중요하므로 귀하가 옳다고 생각합니다. 대부분의 사람들은 아마도 이것을 내가 원하는 방식으로 사용하지 않을 것입니다. 즉, 아마 모두 사용하지 않을 것입니다. 그러나 스타일러스 인덱스 아이디어는 이에 대한 흥미로운 솔루션입니다.

이것은 우선 순위가 아니지만 방금 이것을보고 참조로 추가하고 싶었습니다. https://github.com/chriseppstein/sass-globbing

저는 Sass의 열렬한 팬이며 Chris Eppstein의 glob 가져오기 플러그인을 항상 사용합니다(Windows 시스템에 있던 팀원은 사용할 수 없었으므로 염두에 두십시오).

나는 LESS에서 이에 상응하는 것을 찾고 있었는데, 누구든지 비슷한 것을 볼 수 있습니까?

네, 저는 확실히 이 플러그인의 팬입니다. globbing을 사용해 본 사람은 그것이 얼마나 좋은 작업인지 알 것이라고 생각하지만 실제로 사용하기 전까지는 "가져가기 좋은" 것 중 하나입니다. 지금은 그것 없이 빌드를 시도하는 것을 상상할 수 없습니다. assemble-less 를 사용할 수 있으며 globbing을 지원합니다(저는 그 유지 관리자 중 한 명입니다...)

Btw @josephspens 어제 SASS를 LESS로 변환하기 위해 이 프로젝트 를 만들었습니다. 개념 증명으로 .scss 파일을 bootstrap-sass 및 기초 에서 LESS로 변환했습니다. 두 예제 모두 ./test/ 폴더에 있습니다. 나는 실제로 모든 Bootstrap .scss 파일을 LESS로 다시 변환하는 데 얼마나 근접했는지에 놀랐습니다. 변환된 sass 파일과 "네이티브" 부트스트랩이 적은 파일(v2.3.1) 간에 diff를 시도하십시오. 완전한 기능은 아니지만 많은 시간을 절약할 수 있습니다.

프로젝트에서 LESS를 사용해야 하는 경우 체크아웃할 가치가 있습니다. 일부 언어 기능의 경우 LESS를 SASS로 변환하는 프로세스를 되돌리는 것이 어렵지 않아야 합니다.

@lukeapage , https://github.com/cloudhead/less.js/issues/1181#issuecomment -13546979에서 이것이 mixin 라이브러리에만 유용할 것이라고 언급했으며 당시에는 사실이었습니다.

그러나 이제 <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 플러그인을 만들고 싶은데 어디서 시작해야 하는지 알려주실 수 있나요? 고마워

Jon에게 도움을 요청한 첫 번째 요청을 놓쳐서 죄송합니다. 의도한 것은 아닙니다.
플러그인이
표준 노드 파일 액세스를 재정의하고 상속 및 구현할 수 있습니다.
하지만 그렇게 하면 다른 플러그인이 그 위에 구축되는 것을 막을 수 있습니다.
매우 조심) 어쨌든 적어도 가져오기를 위해 코어에 지원을 추가할 것입니다.
하나의 가져오기에서 여러 파일. 오늘 가능합니다, 새로운 bower 플러그인
하지만 약간 해키합니다. 연락을 드릴 것입니다.

하, 나는 내가 이미 댓글을 달고 있다는 것을 깨닫지 못했고, 그래서 우리 둘은 lol. 나는 전혀 걱정하지 않습니다.

핵심에 넣는 것이 가장 좋습니다.

잘 들린다. 저도 기꺼이 도와드리겠습니다. 어느 쪽이든 걱정하지 마십시오.

좋아, 생각했고 이것이 내가 할 방법입니다.

1. 추상 파일 관리자에 expandToFilelist를 추가합니다. 기본적으로
   주어진 파일 이름을 포함하는 배열을 반환합니다. 해야하는지 확실하지 않음
   동기식 또는 비동기식 - 아마도 중요하지 않을 것입니다. 비동기식으로 만드시겠습니까?
2. 가져오기 관리자에서 파일 관리자가 있으면 해당 함수를 호출합니다. 그 다음에
   모든 파일을 반복하고 1에서 수행한 작업을 각각 수행합니다.
3. 모든 파일의 결과를 가져올 때까지 가져오기 관리자가 기다리도록 했습니다.
   그런 식으로 콜백(가져오기 방문자에 있음)을 다시 호출하기 전에
   일관된 주문을 유지할 수 있습니다. 콜백은 이제
   모든 인수를 포함하는 배열(예: 전체 파일 이름은 한 번만 수신되어야 함
   파일당).
4. 컨텍스트 주변에서 수입 방문자에게 합병증이 있을 수 있습니다.
   확실한
5. 가져오기는 이제 루트 배열(또는 루트 배열
   및 파일 이름). 평가 기능에서 모든 루트를 평가해야 하며
   결합된 루트를 반환하거나 다음의 배열을 사용하여 새 규칙 세트를 생성할 수 있습니다.
   evald 뿌리, 작동하는 경우
6. 컴파일 및 테스트 - 모두 작동해야 함
7. 파일 이름이 다음과 같은 경우 expandToFilelist를 구현하도록 노드 파일 관리자 변경
   * 포함
8. 테스트를 추가하고 Jasmine 섹션의 제외 항목에 테스트를 추가합니다.
   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 jesus는 와일드 카드 지원에 만족할 것입니다.

여러분, 피드백은 훌륭하지만 +1 가 이 기능을 더 빠르게 만들지는 않을 것입니다. 구현할 준비가 된 것으로 표시되며 누군가 구현하면 구현됩니다.

+1 jesus는 와일드 카드 지원에 만족할 것입니다.

나는 예수님이 전처리기를 선택하신다면 더 적을 것이라고 말하는 것이 안전하다고 생각합니다.

더 이상 이 문제의 해결을 기다릴 수 없기 때문에 이를 수행하는 플러그인을 작성하고 내 프로젝트에 사용합니다. 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, 폴더 또는 http url 또는 git url.

미리 감사드립니다. 이것은 많은 마음의 고통을 덜어줄 것입니다.

@tonyflp , 죄송합니다. 오타가 있었습니다. less-plugin-glob 를 설치해야 합니다.
Less는 less-plugin-* 표기법으로 명명된 플러그인만 허용합니다.

@just-boris 잘 작동했습니다. 감사합니다.

이 기능에 대한 업데이트가 없습니까?

just-boris 나는 grunt-contrib-less를 사용합니다. 플러그인을 다음과 같이 로드하는 방법에 대한 예가 있습니다.

플러그인: [
new (require('less-plugin-autoprefix'))({브라우저: ["마지막 2개 버전"]}),
새로운 (require('less-plugin-clean-css'))(cleanCssOptions)
],

grunt-contrib-less와 함께 작동하도록 여기에 멋진 플러그인을 어떻게 로드합니까?

큰:+1: 기능용

@vospascal 이 내 리포지토리에 답변했습니다.

;) thnx @just-boris 봤어요 :-) :+1:

아직 이 기능을 기다리고 있습니다 :+1: . @just-boris 감사합니다.

@just-boris 감사합니다! 감사합니다 :-)

모든 Less 파일을 한 위치에 두는 것보다 모든 구성 요소를 한 곳에 묶는 것을 선호하기 때문에 이것은 저에게 매우 유용한 기능이 될 것입니다. 이것은 모든 곳에 존재하는 Less 파일로 이어지며, 이는 수동으로 가져오기 목록을 유지 관리하는 악몽이 될 것입니다.

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

그런 다음 덜 작업의 옵션 그룹에 있는 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 대신 몇 가지 한 줄짜리 셸 스크립트 를 사용하고 있기 때문입니다. 나는 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을 less에 통합할 수 없습니까?

잘 통합되지만 아무 것도하지 않는 것 같습니다.

플러그인을 주석 처리하면 가져오기에 대한 오류가 덜 정확합니다.
글로빙.

다시 넣으면 오류가 멈춥니다.

그래서, 나는 그것이 무언가를하고 있다고 가정합니다.

2015년 8월 5일 수요일, Mattia Astorino [email protected]
썼다:

@SpencerCarstens https://github.com/SpencerCarstens 통합할 수 없습니다
더 적은 내부의 glob-plugin?

—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/less/less.js/issues/1181#issuecomment -128262749.

진심으로,

스펜서 카스텐스

@에퀴누소시오

less 내부에 glob-plugin을 통합할 수 없습니까?

"이것을 코어에 넣지 않는 이유"를 의미하는 경우... 그렇다면 현재의 Less 접근 방식(여기에서 다양한 스레드에 대한 여러 논의에서 덜 또는 더 많이 설정됨)은 대략 "핵심에 기능을 넣지 마십시오. _전에_ 기능이 거기에 속하고 다른 방법이 없다는 것이 절대적으로 그리고 완전히 명백해집니다." 즉, 플러그인으로 구현될 수 있는 것이 있다면 플러그인으로 구현해야 _해야_ 합니다 clean-css .

@seven-phases-max 네, 감사합니다. 나는 이것을 좋아한다.

@just-boris 플러그인 에 구현된 대로 종료합니다.

+1

+1

오래된 스레드를 부활시키는 것에 대해 이야기하십시오.

이 +1은 무엇을 나타내야 합니까? 플러그인이 작동하지 않습니까?

+1은 당신이 그것을 원하거나 지원한다는 것을 나타냅니다.

무엇을 지원합니까? 그게 내가 말하는거야. 이 문제가 해결되었으며 문제가 종료되었습니다. 그래서 +1되는 것이 무엇인지 묻고 있습니다.

2년 넘게 이런 메일을 받았는데 이게 뭐지..