Kombinieren Sie CSS-Dateien in einzelne Datei mit NPM

Question

Ich habe mehrere CSS-Dateien in meinem Projekt. Ich möchte sie zu einem einzigen nur über NPM (kein Schluck oder Grunzen) kombinieren.

Ich habe von ccs-merge und anderen Knotenmodulen gehört, aber kein praktisches Beispiel gesehen. Was ist der beste und einfachste Weg, um es zu erreichen?

Edited:

Hier ist meine Projektstruktur:

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

Ich möchte alle Dateien meiner CSS in eine einzelne Datei aus dem NPM-Skript direkt kombinieren. Hier ist meine aktuelle 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" 
    }, 

Die Concat-CSS-Befehl funktioniert nicht. „Fehler bei .... 'CSS-concat ...'

Answer 1

Hier ist das einfachste Beispiel, das ich denken konnte angesichts der folgenden Projektstruktur und Dateien.

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

Projekt/css/one. css:

.one { 
    color: red; 
} 

Projekt/css/two.css:

.two { 
    text-align: center; 
} 

Projekt/package.json:

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

Sie können dies in Ihrem Terminal laufen:

$ npm run concat-css 

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

die in Projekt/Ausgabe-Ergebnisse/all.css:

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

Dies ist offensichtlich zu einfach, aber es sollte das Konzept demonstrieren. Sie können mehrere Shell-Befehle zusammen über npm run scripts verschicken, und Sie können sogar Run-Skripte innerhalb anderer Run-Skripte aufrufen.

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