使用 NPM 将 CSS 文件合并为单个文件

Question

我的项目中有几个 css 文件。我想仅通过 NPM 将它们合并为一个（没有 gulp 或 grunt）。

我听说过 ccs-merge 和其他节点模块，但没有看到任何实际示例。 实现它的最好和最简单的方法是什么？

已编辑：

这是我的项目结构：

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

我想直接从 NPM 脚本将我所有的 CSS 文件合并到一个文件中。 这是我当前的 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"
  },

concat-css 命令不起作用。 “失败于......'css-concat......'

Answer 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;
}

project/package.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

这会导致 project/output/all.css：

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

这显然过于简单化了，但它应该展示了这个概念。您可以通过npm run scripts 将多个 shell 命令连接在一起，甚至可以从其他运行脚本中调用运行脚本。

Here's a very good article about this topic by Keith Cirkel（不需要咕哝。）