postcss / postcss-cli

CLI for postcss
Other
840 stars 93 forks source link

Question: Step guide how to minify multiple input files with postcss-cli #195

Closed bobc82 closed 6 years ago

bobc82 commented 6 years ago

I installed cssnano following these step: http://cssnano.co/guides/getting-started/

Into the root of my project i ran:

`npm install cssnano --save-dev`

After i installed postcss-cli:

`npm install postcss-cli --global`

Finally i created postcss.config.js file following the guide:

```
module.exports = {
   plugins: [
    require('cssnano')({
        preset: 'default',
    }),
  ],
};
```

I was able to minify only a file. In the roow of my project i executed:

`postcss src/plugins/bootstrap/css/bootstrap.css > src/compiled.min.css`

But i'm not able to include multiple input files (and i don't know if it's possible) as i did in gulp. When i try to run a command of this type:

`postcss src/plugins/bootstrap/css/bootstrap.css src/plugins/animatecss/css/animate.css > src/compiled.min.css`

There was the following output:

`Input Error: Must use --dir or --replace with multiple input files`

Can someone suggest me a step guide how to minify multiple input files with postcss-cli? (I didn't be able to find some simple step-by-step tutorial).

bobc82 commented 6 years ago

I found the solution at this question. I used gulp-concat-css to concatenate al css files into a bundle and after i minified the bundle.css file with postcss: postcss src/bundle.css > src/bundle.min.css

RyanZim commented 6 years ago

To do this on the CLI, do:

cat src/plugins/bootstrap/css/bootstrap.css src/plugins/animatecss/css/animate.css | postcss > src/compiled.min.css
bobc82 commented 6 years ago

Thank you!