简体   繁体   中英

npm copy and compile LESS files using cpx

I'm trying to copy and compile / transform LESS files and ES6 files to another directory using npm tools and packages.
This is my basic structure:

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

And this is the desired new directory structure:

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

For the es6 transpile I'm using babel and it works great:

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

But i struggle with the LESS files. I know i can use cpx to copy files and keep the structure:

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

But i want to copy them while processing each of them and compile it from LESS to CSS .
There is a -t argument for a module transformation of each file passed through the pipeline but i can't find a proper module to pass them through.
I tried lessc and lessify but it doesn't seem like a good fit.

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

I don't mind using webpack or any other pattern to achieve this.

Answering my own question here
I failed to find a fit solution to my situation. After testing a lot of npm packages i found out that each package provides a small part of the solution to my challenge, I decided to write my own solution.
lessc-glob
Basically it takes a glob and copy the structure from source to target (using cpx) but it passes each file through a less transform stream. Of course it changes the file extension to .css in the end. This is a very tailored solution to my exact challenge but maybe someone will find it useful.
Feel free to make it better if you want to.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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