2017-05-31 24 views
0

npmツールとパッケージを使用して、lessファイルとES6ファイルを別のディレクトリにコピーおよび変換しようとしています。
これが私の基本的な構造です:npm cpxを使用してLESSファイルをコピーしてコンパイルします

-src 
    -components 
    -component1 
     component1.js // es6 code 
     styles.less 
    -component2 
     component2.js // es6 code 
     styles.less 
    -component3 
     component3.js // es6 code 
     styles.less 

そして、これが希望する新しいディレクトリ構造である:私はbabelを使用していますし、それは素晴らしい作品ES6のtranspileについては

-lib 
    -component1 
    component1.js // es5 code 
    styles.css 
    -component2 
    component2.js // es5 code 
    styles.css 
    -component3 
    component3.js // es5 code 
    styles.css 

"build:js": "cross-env NODE_ENV=production babel ./src/components --out-dir ./lib --ignore spec.js" 

しかし、私はLESSファイルで苦労しています。

"build:less": "cpx \"./src/components/**/*.less\" ./lib" 

しかし、私はそれらのそれぞれの処理中にそれらをコピーして CSSLESSからコンパイルしたい:私は、私はファイルをコピーし、構造を維持するために cpxを使用することができます知っています。
パイプラインを通過する各ファイルのモジュール変換には -t引数がありますが、それらを渡す適切なモジュールが見つかりません。
lessclessifyを試しましたが、うまくフィットしていないようです。

"build:less": "cpx \"./src/components/**/*.less\" ./lib -t [less_compiler_here?]" 

私はこれを達成するためにwebpackまたは任意の他のパタ​​ーンを使用して気にしません。

答えて

0

ここに自分の質問に答えます
私の状況に合った解決策を見つけることができませんでした。たくさんのnpmパッケージをテストした結果、各パッケージが私の挑戦に対するソリューションのほんの一部を提供することが判明したので、自分で解決策を書くことにしました。
lessc-glob
基本的にはglobが必要で、ソースからターゲットに(cpxを使用して)構造をコピーしますが、各ファイルはlessの変換ストリームで渡します。もちろん、ファイルの拡張子は最後に.cssに変更されます。 これは私の正確な挑戦に対する非常に誂えられた解決策ですが、誰かがそれが役に立つと思うかもしれません。
あなたがしたい場合は、気をつけてください。

+0

私にとっては、 'gulp' /' grunt'などのツールのユースケースのようです。 –

+0

@ seven-phases-maxは、彼がすでにnpm-scriptsにプロジェクト全体(そしておそらく他のプロジェクト)を基盤にしているときに、gulpやgruntを使うべきではないと思います。まあ、少なくとも私の場合はそうです。 –

関連する問題