Wednesday, 31 May 2017

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?]"



via Sag1v

No comments:

Post a Comment