繁体   English   中英

npm使用cpx复制和编译LESS文件

[英]npm copy and compile LESS files using cpx

我正在尝试使用npm工具和软件包将LESS文件和ES6文件复制和编译/转换到另一个目录。
这是我的基本结构:

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

这是所需的新目录结构:

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

对于es6 Transpile,我正在使用babel ,它的效果很好:

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

但是我为LESS文件而LESS 我知道我可以使用cpx复制文件并保留结构:

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

但是我想在处理它们的同时复制它们,并将其从LESS编译为CSS
对于通过管道传递的每个文件的模块转换,都有-t参数,但是我找不到合适的模块来传递它们。
我尝试了lessclessify但这似乎不合适。

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

我不介意使用webpack或任何其他模式来实现这一目标。

在这里回答我自己的问题
我找不到适合我情况的合适解决方案。 在测试了许多npm软件包之后,我发现每个软件包都提供了应对挑战的一小部分解决方案,因此我决定编写自己的解决方案。
lessc,水珠
基本上,它使用一个glob并将结构从源复制到目标(使用cpx),但是它通过less转换流传递每个文件。 当然,最后它会将文件扩展名更改为.css 这是针对我的确切挑战的量身定制的解决方案,但也许有人会发现它很有用。
如果需要,请随时做得更好。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM