使用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运行脚本将多个shell命令组合在一起,甚至可以从其他运行脚本中调用运行脚本.

这是Keith Cirkel关于这个主题的非常好的文章.不需要咕噜声或吞咽.