使用postcss缩小多个输入文件

Question

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 file (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 error:

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

Answer 1

I found the solution at this question. I used gulp-concat-css to concatenate al css files into a bundle, as follows:

• I created a Gulpfile.js file in my project root and I concatenated file with gulp-concat-css as explained here:

https://www.npmjs.com/package/gulp-concat-css

var gulp = require('gulp');
var concatCss = require('gulp-concat-css');

gulp.task('default', function () {
  return gulp.src('cssfolder/*.css')
    .pipe(concatCss("bundle.css"))
    .pipe(gulp.dest('out/'));
});

• In the prompt command, in the root of my project i ran:

  gulp default

And bundle.css (under out/ folder) was created.

• After i minified the bundle.css file with postcss:

  postcss out/bundle.css > out/bundle.min.css