Объединение файлов CSS в один файл с помощью NPM

у меня есть несколько файлов css в моем проекте. Я хочу объединить их в один только через NPM (без глотка или хрюканья).

Я слышал о ccs-merge и других модулях узлов, но не видел практического примера. Каков наилучший и самый простой способ достичь этого?

редактировать:

вот моя структура проекта:

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

Я хочу объединить все мои файлы CSS в один файл непосредственно из сценария NPM. Здесь мой текущий пакет.в 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"
  },

команда concat-css не работает. "Не удалось.... 'css-concat...'

12
npm

1 ответов

вот самый простой пример, который я мог придумать. Учитывая следующую структуру проекта и файлы:

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

project / css / one.в CSS:

.one {
  color: red;
}

project / css / two.в CSS:

.two {
  text-align: center;
}

пакета/проекта.в JSON:

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

вы можете запустить это в своем терминале:

$ npm run concat-css

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

что приводит к проект/выход/все.в CSS:

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

это очевидно слишком упрощенно, но это должно продемонстрировать концепцию. Вы можете передать несколько команд оболочки вместе через npm запускает скрипты, и вы даже можете вызвать сценарии запуска из других сценариев запуска.

вот очень хорошая статья по этой теме кита Cirkel. Нет хрюкать или глоток нужен.

12