Combina i file CSS in un singolo file utilizzando NPM

Question

Ho diversi file CSS nel mio progetto. Voglio combinarli in uno solo solo tramite NPM (senza ingordo o grugnito).

Ho sentito di ccs-merge e altri moduli di nodo ma non ho visto alcun esempio pratico. Qual è il modo migliore e più semplice per raggiungerlo?

Modificato:

Qui è la mia struttura del progetto:

Client/ 
    ├──js/ 
     |──component1 
       ├──one.css 
       ├──one.js 
     |──component2 
       ├──two.css 
       ├──two.js 
    ├──output/ 
    └──package.json 

voglio combinare tutti i miei file CSS in un unico file direttamente dallo script NPM. Ecco il mio attuale package.json

"scripts": { 
    "start": "watchify -o Client/js/bundle.js -v -d Client/js/app.jsx", 
    "build": "browserify . -t [envify --NODE_ENV production] | uglifyjs -cm > Client/js/bundle.min.js", 
    "concat-css": "css-concat Client/js/*.css > Client/js/styles.css" 
    }, 

Il comando concat-css non funziona. "Impossibile a .... 'css-concat ...'

Answer 1

Ecco l'esempio più semplice che potevo pensare Data la seguente struttura e file di progetto:.

project/ 
├──css/ 
| ├──one.css 
| └──two.css 
├──output/ 
└──package.json 

progetto/css/uno. css:

.one { 
    color: red; 
} 

progetto/css/two.css:

.two { 
    text-align: center; 
} 

progetto/package.json:

{ 
    "name": "project", 
    "version": "1.0.0", 
    "scripts": { 
    "concat-css": "cat css/* > output/all.css" 
    } 
} 

È possibile eseguire questo nel terminale:

$ npm run concat-css 

> project@1.0.0 concat-css /path/to/project 
> cat css/* > output/all.css 

che si traduce in progetto/uscita/all.css:

.one { 
    color: red; 
} 
.two { 
    text-align: center; 
} 

Questo è ovviamente troppo semplicistico, ma dovrebbe dimostrare il concetto. È possibile unire più comandi di shell insieme tramite npm run scripts ed è anche possibile chiamare gli script di esecuzione da altri script di esecuzione.

Here's a very good article about this topic by Keith Cirkel. No grunt or gulp needed.